I'm not an expert in jQuery - and I know this is easy - but I cannot find the solution for this.

I have a page with 10 alerts (cancel, confirm, resend..) - with 10 forms and 10 submit buttons.

How I can disable the submit button on submit form with a generic function ?

I know how I can disable 1 form.

$('form#id').submit(function(){
  $(this).find(':input[type=submit]').prop('disabled', true);
}); 

but with this I need to write 10x - a function for each form...

$('.form').submit(function(){
  $(this).find(':input[type=submit]').prop('disabled', true);
}); 

I try this but, didn't work..

I need a function to works for any form..

All forms are like this:

            <form id="cancelform" action="cancel.asp">
            <input type="hidden" name="codec" id="codec" value="121">
                <button type="button" class="btn btn-danger bk-rd-off" data-dismiss="modal"><i class="fa fa-times"></i> NO</button>
                <button type="submit" class="btn btn-success bg-success-800 bk-rd-off"><i class="fa fa-check"></i> YES</button>
            </form> 

I'm not an expert in jQuery - and I know this is easy - but I cannot find the solution for this.

I have a page with 10 alerts (cancel, confirm, resend..) - with 10 forms and 10 submit buttons.

How I can disable the submit button on submit form with a generic function ?

I know how I can disable 1 form.

$('form#id').submit(function(){
  $(this).find(':input[type=submit]').prop('disabled', true);
}); 

but with this I need to write 10x - a function for each form...

$('.form').submit(function(){
  $(this).find(':input[type=submit]').prop('disabled', true);
}); 

I try this but, didn't work..

I need a function to works for any form..

All forms are like this:

            <form id="cancelform" action="cancel.asp">
            <input type="hidden" name="codec" id="codec" value="121">
                <button type="button" class="btn btn-danger bk-rd-off" data-dismiss="modal"><i class="fa fa-times"></i> NO</button>
                <button type="submit" class="btn btn-success bg-success-800 bk-rd-off"><i class="fa fa-check"></i> YES</button>
            </form> 

• javascript
• jquery
• forms
• form-submit

• use a function and send the if of the as parameter to the function and work out everything else from there – guradio Commented Apr 23, 2018 at 0:29
• Possible duplicate of Disable submit functionality for all forms on a HTML page – Heretic Monkey Commented Apr 23, 2018 at 0:31
• Hi @MikeMcCaughan tks! I read the solution, but my question is about to disable the submit button ON SUBMIT with 1 function only - and works for any form in the page. (because if I have 10 forms I need 10 functions) – DANIEL Commented Apr 23, 2018 at 0:49
• The accepted answer on that question is a single line of code that will disable submission of all forms on the page wherever you put it... – Heretic Monkey Commented Apr 23, 2018 at 13:42
• Yes @MikeMcCaughan, but my question is about how to disable the submit button ON SUBMIT and with ONLY 1 Function for any form. That question don't solve the problem. As I said in my question - how to disable the button I know. how to disable ON SUBMIT - I know. I don't know how to disable on submit and with only 1 generic function - to works to all forms that I have in the html. Without this I need to write 1 function to disable for each form - because the method that I know needs the form id. here I got 2 plete solutions - with vanilla JS and with JQuery. – DANIEL Commented Apr 24, 2018 at 2:44

4 Answers 4

You don't even need jQuery for this, feel free to use vanilla JS:

document.querySelectorAll('form input[type="submit"]')
  .forEach(input => input.disabled = true);

Or if you want to disable form submission and not just the buttons, you can do something similar to preventDefault on every submit event:

document.querySelectorAll('form').forEach((form) => {
  form.addEventListener('submit', e => e.preventDefault());
});

Select all the forms, then onSubmit, use the event.target to get a reference to just that single form that is being submitted, find it's submit button, and disable it. Should work for 1 form, or 100 forms....

Example JS Fiddle

$('form').submit(function(event){
  // disable future submits
    $(event.target).find('[type="submit"]').prop('disabled', true); 
}); 

Depending on your needs, you might also include an event.preventDefault();

You're scoping adding the disabled prop to the $(this) selector which is the current form being submitted. If you want to disable all submit buttons you can use a global query selector on your submit callback:

$('.form').submit(function() {
  $('input[type=submit]').prop('disabled',true);
});

I'm not sure why you're trying to use find when you can just do this:

$('input[type=submit]').prop('disabled', true);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit"/>
<input type="submit"/>
<input type="submit"/>