Develop Reference

How to disable submit button? [duplicate]

I wrote this code to disable submit buttons on my website after the click:
$('input[type=submit]').click(function(){
$(this).attr('disabled', 'disabled');
});
Unfortunately, it doesn't send the form. How can I fix this?
EDIT
I'd like to bind the submit, not the form :)

Do it onSubmit():
$('form#id').submit(function(){
$(this).find(':input[type=submit]').prop('disabled', true);
});
What is happening is you're disabling the button altogether before it actually triggers the submit event.
You should probably also think about naming your elements with IDs or CLASSes, so you don't select all inputs of submit type on the page.
Demonstration: http://jsfiddle.net/userdude/2hgnZ/
(Note, I use preventDefault() and return false so the form doesn't actual submit in the example; leave this off in your use.)

Specifically if someone is facing problem in Chrome:
What you need to do to fix this is to use the onSubmit tag in the <form> element to set the submit button disabled. This will allow Chrome to disable the button immediately after it is pressed and the form submission will still go ahead...
<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;">
<input type="submit" name="submit" value="Submit" id="submit">
</form>

Disabled controls do not submit their values which does not help in knowing if the user clicked save or delete.
So I store the button value in a hidden which does get submitted. The name of the hidden is the same as the button name. I call all my buttons by the name of button.
E.g. <button type="submit" name="button" value="save">Save</button>
Based on this I found here. Just store the clicked button in a variable.
$(document).ready(function(){
var submitButton$;
$(document).on('click', ":submit", function (e)
{
// you may choose to remove disabled from all buttons first here.
submitButton$ = $(this);
});
$(document).on('submit', "form", function(e)
{
var form$ = $(this);
var hiddenButton$ = $('#button', form$);
if (IsNull(hiddenButton$))
{
// add the hidden to the form as needed
hiddenButton$ = $('<input>')
.attr({ type: 'hidden', id: 'button', name: 'button' })
.appendTo(form$);
}
hiddenButton$.attr('value', submitButton$.attr('value'));
submitButton$.attr("disabled", "disabled");
}
});
Here is my IsNull function. Use or substitue your own version for IsNull or undefined etc.
function IsNull(obj)
{
var is;
if (obj instanceof jQuery)
is = obj.length <= 0;
else
is = obj === null || typeof obj === 'undefined' || obj == "";
return is;
}

Simple and effective solution is
<form ... onsubmit="myButton.disabled = true; return true;">
...
<input type="submit" name="myButton" value="Submit">
</form>
Source: here

This should take care of it in your app.
$(":submit").closest("form").submit(function(){
$(':submit').attr('disabled', 'disabled');
});

A more simplier way.
I've tried this and it worked fine for me:
$(':input[type=submit]').prop('disabled', true);

Want to submit value of button as well and prevent double form submit?
If you are using button of type submit and want to submit value of button as well, which will not happen if the button is disabled, you can set a form data attribute and test afterwards.
// Add class disableonsubmit to your form
$(document).ready(function () {
$('form.disableonsubmit').submit(function(e) {
if ($(this).data('submitted') === true) {
// Form is already submitted
console.log('Form is already submitted, waiting response.');
// Stop form from submitting again
e.preventDefault();
} else {
// Set the data-submitted attribute to true for record
$(this).data('submitted', true);
}
});
});

Your code actually works on FF, it doesn't work on Chrome.
This works on FF and Chrome.
$(document).ready(function() {
// Solution for disabling the submit temporarily for all the submit buttons.
// Avoids double form submit.
// Doing it directly on the submit click made the form not to submit in Chrome.
// This works in FF and Chrome.
$('form').on('submit', function(e){
//console.log('submit2', e, $(this).find('[clicked=true]'));
var submit = $(this).find('[clicked=true]')[0];
if (!submit.hasAttribute('disabled'))
{
submit.setAttribute('disabled', true);
setTimeout(function(){
submit.removeAttribute('disabled');
}, 1000);
}
submit.removeAttribute('clicked');
e.preventDefault();
});
$('[type=submit]').on('click touchstart', function(){
this.setAttribute('clicked', true);
});
});
</script>

How to disable submit button
just call a function on onclick event and... return true to submit and false to disable submit.
OR
call a function on window.onload like :
window.onload = init();
and in init() do something like this :
var theForm = document.getElementById(‘theForm’);
theForm.onsubmit = // what ever you want to do

The following worked for me:
var form_enabled = true;
$().ready(function(){
// allow the user to submit the form only once each time the page loads
$('#form_id').on('submit', function(){
if (form_enabled) {
form_enabled = false;
return true;
}
return false;
});
});
This cancels the submit event if the user tries to submit the form multiple times (by clicking a submit button, pressing Enter, etc.)

I have been using blockUI to avoid browser incompatibilies on disabled or hidden buttons.
http://malsup.com/jquery/block/#element
Then my buttons have a class autobutton:
$(".autobutton").click(
function(event) {
var nv = $(this).html();
var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
$(this).html(nv2);
var form = $(this).parents('form:first');
$(this).block({ message: null });
form.submit();
});
Then a form is like that:
<form>
....
<button class="autobutton">Submit</button>
</form>

Button Code
<button id="submit" name="submit" type="submit" value="Submit">Submit</button>
Disable Button
if(When You Disable the button this Case){
$(':input[type="submit"]').prop('disabled', true);
}else{
$(':input[type="submit"]').prop('disabled', false);
}
Note: You Case may Be Multiple this time more condition may need

Easy Method:
Javascript & HTML:
$('form#id').submit(function(e){
$(this).children('input[type=submit]').attr('disabled', 'disabled');
// this is just for demonstration
e.preventDefault();
return false;
});
<!-- begin snippet: js hide: false console: true babel: false -->
<form id="id">
<input type="submit"/>
</form>
Note: works perfectly on chrome and edge.

The simplest pure javascript solution is to simply disable the button:
<form id="blah" action="foo.php" method="post" onSubmit="return checkForm();">
<button id="blahButton">Submit</button>
</form>
document.getElementById('blahButton').disabled = true ;
It works with/without onSubmit. Form stays visible, but nothing can be sumbitted.

In my case i had to put a little delay so that form submits correctly and then disable the button
$(document).on('submit','#for',function()
{
var $this = $(this);
setTimeout(function (){
$this.find(':input[type=submit]').attr('disabled', 'disabled')
},1);
});

jQuery validate submits form twice

I'm using jQuery validator and jQuery 1.8.3. For some reason my form is submitted twice which causes errors. This is the code:
someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
submitHandler: function(){
mySubmitCallBackFunction();
},
});
return false;
};
someNameSpace.myValidateFunction();
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
});
Any idea why the form is submitting twice? The form button is not an input submit but a <button> element (needed in this case).

Your form is submitted twice because :
you call $('#myForm').submit()
you click on the submit button which also triggers the form event. Note : the , if it is in a form, will also trigger the form event on click
So I think you have to add a return false in your on click method to prevent the form to be submitted when you click on the submit button. Now, only $('#myForm').submit(); will submit the form :
someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
submitHandler: function(){
mySubmitCallBackFunction();
},
});
return false;
};
someNameSpace.myValidateFunction();
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
return false;
});
I think you also don't need to add this :
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
return false;
});
The validate method will be automatically called when the form is submited.

You don't need to add following code
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
});
submitHandler code will automatically handles form submit.

I had the same issue:
my goal: validate many forms with the same class:
my php:
form class="js-validate-itemForm" method="post" action="">
...
form class="js-validate-itemForm" method="post" action="">
my js:
$('.js-validate-itemForm').each(function () {
$(this).validate({
submitHandler: function (form, event) {
doActionOnItemform(form, event);
return false;
}
});
});

I figure out the reason why this code would submit twice from:
someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
submitHandler: function(){
mySubmitCallBackFunction();
},
});
return false;
};
someNameSpace.myValidateFunction();
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
});
At first, when u click button in the form, u will call $('#myForm').submit(), and this call event will submit one form; then form event submitHandler:will call ajaxsubmit to submit another form; so u will submit twice forms.
Secondly, to be honest, this code has errors -^_^- and dont understand the jQuery_validate_plugin;
If u know $('#myForm').validate will submit one form, u know the solution--u just delete the button call event and let $('#myForm').validate submit form; So that is the code：
someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
submitHandler: function(){
mySubmitCallBackFunction();
},
});
};
Then done!

Jquery Validation Unvalidated form submit button able to be clicked (With Fiddle)

I have a Jquery form with a validation script on the URL, it correctly validates and invalidates the URL. However, when it invalidates the URL, it still allows the form button to be clicked, but not submitted.
This causes the hidden loading image to show even though the form is no being submitted.
Here is a fiddle with the loader and script
http://jsfiddle.net/mikeef74/gzSDH/16/
var submit_hit = false;
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
if (submit_hit) {
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
$('body').css("background-image", "url(images/previewbg7.jpg)");
$('body').css("overflow-y", "auto");
}
}
});
$("#form_710370").validate();
$('#form_710370').submit(function (e) {
$('#loader1').show();
submit_hit = true;
return true;
});
});

The submit event will trigger whenever you attempt to submit. You've defined a submit event handler tied to the form which is why the image is showing.
Seems you want to trigger the loader image on a conditional submit so you'll need to use the validation's submitHandler. Now the inner function will only trigger when the form is valid -- the loader image will display and the form will be explicitly submitted.
$("#form_710370").validate({
submitHandler: function(form) {
$("#loader1").show();
submit_hit = true;
form.submit();
}
});
// remove this
//$('#form_710370').submit(function (e) { ... }
http://jqueryvalidation.org/documentation/

This is way validate a form in jquery:
$(function() {
$("#form_710370").validate({
rules: {
//
},
messages: {
//
},
submitHandler: function(form) {
form.submit();
}
});
});

On submit, load a html popup file into a div

I am trying to redirect to a contact form on submit to a HTML file which I have made using.
header('Location: /dev/thanks.html');
However, this loads it to a different page and not to the page that I'm already on.
I already have the jQuery to make a popup for the contact form and information page, which is:
$('a.contact , a.contact_footer, a.contact_text').click(function() {
$("html, body").animate({ scrollTop: 0 }, 600);
$("#popup").load("/dev/contact.php");
// Getting the variable's value from a link
var show = $('#popup').css('display', 'block'),
popup = $(this).attr('href');
//Fade in the Popup and add close button
$(popup).fadeIn(300);
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
On submitting the contact form, I want to load a new file (thanks.html) to replace the popup (contact form) with a thank-you message. Similar to what I'm doing with the jQuery already, but I want it to only implement on submit:
<div class="submit">
<input type="submit" value="Submit"/>
</div>
What do I need to do to modify my jQuery so it implements on submit instead of on click?

Add the submit event to the contact form:
If you use jQuery 1.7+, use on:
$(document).on("submit", "form#submit_message", function() {
$('#popup').load('/dev/thanks.html');
return false;
});
If not, use live (or upgrade your jQuery version):
//live is old deprecated
$('form#submit_message').live('submit', function() {
$('#popup').load('/dev/thanks.html');
return false;
});

I'm assuming that the form will append directly in the "#popup", without that you will have to change the "var popup..." line.
$("#popup").on("submit", "form", function(event){
var popup = $(this).parent();
var data = $(this).serialize();
$.ajax({
type: "POST",
url: "my_url.php",
data: data
}).done(function(html){
popup.html(html);
});
return false;
});

Is there a way to check if a postback is in progress?

In the case that a button is clicked multiple times on a page - Is there a way to figure out using javascript/jquery that a postback is already in progress and cancels the new attempt to submit the page?
Thanks

You can avoid users from double clicking by disabling whatever form elements can cause a form submit.
Checkout http://greatwebguy.com/programming/dom/prevent-double-submit-with-jquery/ for an example.

You can disable the button on first click, so that you could not click it when the post is in progress, and re enable it when the post-back has finished.
<script type="text/javascript" language="JavaScript">
var submitted = false;
function SubmitTheForm() {
if(submitted == true) { return; }
document.myform.submit();
document.myform.mybutton.value = 'Thank You!';
document.myform.mybutton.disabled = true;
submitted = true;
}
</script>
<form method="post" action="#">
<input type="submit" onclick=return SubmitTheForm()>
</form>

you could always just disable the button in the onclick handler.
$('input[type="submit"]').click(function(e) {
e.preventDefault();
var self = this;
$(self).attr('disabled', 'disabled');
$.post('url',$(self).closest('form').serialize(), function() {
$(self).removeAttr('disabled'); // re-enable after request complete.
});
});

You could have your click event set a variable in your click handler to true and only allow the handler to proceed when the value is false. Of course you will have to set it to false again when your callback finishes.
if (!processInProgress) {
processInProgress = 1
// start the process
}