Can I find out the end of an event with
$._data(this, "events")
What I basically want to do is disable buttons so double form submits and double action can't be made. When it's a normal submit button I do the followings:
<script type="text/javascript">
$(function() {
$("button[js-hide=1]").click(function() {
$(this).prop("disabled", true);
$(this).html("<img src=\"loading5.gif\" />");
})
})
</script>
This works just fine, disables button, and loads a gif until the pase is loaded again.
Now I want the exact same process for simple jQuery buttons. It can be a simple AJAX request or a button that copies one field of text to another. The thing is the button must be disabled until the action is done. I know I could just do the disable / enable thing at the start and the end of a function , but that's not a solution. Cause I want this in a framework.
<script type="text/javascript">
$(function() {
$("button[js-hide=0]").click(function() {
$(this).prop("disabled", true);
$(this).html("<img src=\"loading5.gif\" />");
console.log( $._data(this, "events"))';
})
});
</script>
You need to have a look at jQuery promises, specifically done() (and/or then())
I know there are a lot of questions about it, but I tried several solutions, and nothing works.
In my django app I have a form:
<form method='post'>
<button type='submit'>Send</button>
</form>
I wan't to disable the button once the user has submitted the form. Using other questions, I tried several things, like:
<button type='submit' onclick="this.disabled=true">Send</button>
When I click, the button is disabled... but the form is not submitted. And for each try I had the same issue: either the button is disabled or the form is submitted. I can't find how to do both...
I'm using Chrome. Any idea on why I have this problem? Thank you for your help.
Try this:
$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});
I like this, don't have to traverse the DOM.
Put function on a setTimeout function, this allows make submit and after disable button, even if setTimeout is 0
$(document).ready(function () {
$("#btnSubmit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$("#btnSubmit").prop('disabled', true);
}
});
You could disable it upon the parent form's submit event:
$("form").on("submit", function () {
$(this).find(":submit").prop("disabled", true);
});
Be sure to run this code only after the HTMLFormElement has been loaded, or else nothing will be bound to it. To ensure that the binding takes place, fire this off from within a document-ready block:
// When the document is ready, call setup
$(document).ready(setup);
function setup () {
$("form").on("submit", function () {
$(this).find(":submit").prop("disabled", true);
});
}
Something like this might work.
<button id="btnSubmit" type='submit'> Send </button>
<script>
$("#btnSubmit").on("click", function(e){
e.PreventDefault();
$(this).closest("form")[0].submit();
$(this).prop('disabled',true)
});
</script>
Try, like this,
<input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();">
This ended up being the best solution for me
$("form").submit(function disableSubmit() {
$("input[type=submit]", this).prop("disabled", true);
});
my variant, disable button, no direct disabled but only vidible hidden:
<input type="submit" name="namebutton" value="Nahrát obrázek" onclick="this.style.visibility='hidden';" ondblclick="this.style.visibility='hidden';"/>
You can do something like this. It is work fine with me.
<form method='post' onSubmit='disableFunction()'>
// your code here
</form>
Then in script, add this
<script>
function disableFunction() {
$('#btn_submit').prop('disabled', true);
}
</script>
How about this?
onclick="this.style.visibility='hidden';"
I would say, instead of disabled, hide it.
If you want to go with disabled
onclick="this.style.disabled='true';"
Got an issue on Chrome, wasn't submitting the form. Tried a bunch of different code, this was what worked best for me (and looks best imo):
$('#form_id').submit(function() {
$("input[type='submit']", this)
.val("Please Wait...")
.attr('disabled', 'disabled');
return true;
});
Replace form_id with the id of your form. Classes work too of course: $('.form_class')
Source: JavaScript Coder
I like this better:
<script>
var submit = false;
$('form').submit(function () {
if (submit) { return false; }
else { submit = true;}
});
</script>
this way it also prevents the enter key to submit more than once
I'm using Chrome. Any idea on why I have this problem?
Well, first time I dealt with this, I solved it like this:
function blockButtons() {
$('button:submit').click(function(){
$('button:submit').attr("disabled", true);
});
}
This worked perfectly, but... in Mozilla Firefox. The Google Chrome did not submit it, so I changed it to this:
function blockButtons() {
$('button:submit').click(function(){
var form = $(this).parents('form:first');
$('button:submit').attr("disabled", true);
$('button:submit').css('opacity', 0.5);
form.submit();
});
}
This worked both in Mozilla Firefox, however, after that some of our users using old versions of IE experienced trouble of having two submits. That is, the one initiated by the javascript, and the one by browser ignoring the fact of onclick and just submitting anyway. This can be fixed by e.preventDefault, I guess.
If you don't want an element to be double-clicked, use .one()
<button id="submit" type="submit">Send</button>
<script>
$(function () {
$("#submit").one("click", function () {
//enter your submit code
});
});
.one()
You can do something like this. It is work fine with me.
$("button#submitted").click(function () {
$("button#submitted").prop('disabled', true);
});
Double click on your button. This code will running
You must prevent the form from being submitted more than once, disabling the button is not the right solution because the form could be submitted in other ways.
JavaScript:
$('form').submit(function(e) {
// if the form is disabled don't allow submit
if ($(this).hasClass('disabled')) {
e.preventDefault();
return;
}
$(this).addClass('disabled');
});
Once the form is correctly disabled, you can customize its appearance.
CSS:
form.disabled {
pointer-events: none;
opacity: 0.7;
}
Is it possible to disable standard action being performed while clicking radio button? (without "disable" attr)
So when i click particular radio button, nothing happens. Tried .unbind('click') but doesnt seem to work.
Ty in advance for help
You can use the preventDefault() method exposed by the event object:
$("input:radio").click(function(e) {
e.preventDefault();
});
EDIT: Unfortunately, this does not seem to prevent the browser from checking the radio button that is clicked first (jsFiddle is in "emergency read-only" mode, so I cannot post a demo right now).
This should work:
$('#myradio').click(function(e) {
e.preventDefault();
return false;
});
Just try this.
$('input:radio').click(function(e){
e.preventDefault();
});
Demo
You can try this, this will stop propagation :
$("#my-radio-btn").live("click", function(e){
e.preventDefault();
});
Actually, the first time you click the radio, the checked property is set and hence it shows as checked in browser ( for the firtst time ).
So this piece of code will solve the issue
[I am using jquery library]
$('input:radio').click(function(){
$(this).prop('checked',false);
e.preventDefault();
return false;
});
You need to use event.disableDefault in the function you give to jQuery click.
$("#my_element").click(
function(event) {
event.preventDefault();
// the rest of your code goes here
}
);
I have an HTML file upload page and I need the submit button to be disabled until a file is selected. Then the submit button will be enabled and the user can upload. I assume I can use jQuery code to query the file upload field's value to see whether a file has been selected to upload. And I assume I can check that whenever focus has left the file upload field. My concern is that some browsers might act funny with this and then my users can't upload any files.
Is there a safe way to do this, preferably using jQuery, where I won't be in danger of having some users unable to upload?
This jQuery should work, and is tied to the file input's change() event. This code also applies the disabled attribute so, in the event the user has JavaScript disabled, it shouldn't prevent the form being used:
$(document).ready(
function(){
$('input:submit').attr('disabled',true);
$('input:file').change(
function(){
if ($(this).val()){
$('input:submit').removeAttr('disabled');
}
else {
$('input:submit').attr('disabled',true);
}
});
});
JS Fiddle demo.
A simpler way is to check the file field when the user actually submits the form... that way you won't have to look for form changes.
$(function() {
$('form').submit(function() {
if(!$("form input[type=file]").val()) {
alert('You must select a file!');
return false;
}
});
});
This code is Unobtrusive JavaScript and it won't mess up the form if the user does not support JS.
David Thomas's code can be set for button ID:
<script type="text/javascript">
$(document).ready(function () {
$('#<%=btInsert.ClientID %>').attr('disabled', true);
$('input:file').change(
function () {
if ($(this).val()) {
$('#<%=btInsert.ClientID %>').removeAttr('disabled');
}
else {
$('#<%=btInsert.ClientID %>').attr('disabled', true);
}
});
});
</script>
ok i have a form on which i have some validation through dataannotation which is client side as well as server side validation like some field already exists. i have no javascript validations on the page. now my problem is that what should i do if the user presses the save button multiple times (he keeps pressing the button for 15 times,in my case the page stays there with field already exist message at the top ) . what do u guys do for that?
what i have done (this works fine in firefox but not in ie) it disable the button no matter what just after click in ie
$(document).ready(function () {
$("#btn").submit(function () {
$('#btn').attr('disabled', 'disabled');
});
});
Put an overlay above the whole page. The overlay prevents the user from clicking twice and gives some feedback. The blockUI plugin does this very well.
EDIT:
$(document).ready(function () {
$("#btn").click(function () {
$('#btn').attr('disabled', 'true'); // Disable the button if you like
$.blockUI(); // Blocking the page with a standard message.
});
});
try using .live or you could hide the button after it is pressed.
$(document).ready(function () {
$("#btn").live("click", function () {
$('#btn').attr('disabled', 'disabled');
//or
$('#btn').hide();
});
});