How to disable submit button on submit for many forms - generic function to any form

Question

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>

use a function and send the if of the as parameter to the function and work out everything else from there — guradio, Apr 23 '18 at 00:29
Possible duplicate of [Disable submit functionality for all forms on a HTML page](https://stackoverflow.com/questions/10283755/disable-submit-functionality-for-all-forms-on-a-html-page) — Heretic Monkey, Apr 23 '18 at 00: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, Apr 23 '18 at 00: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, Apr 23 '18 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 complete solutions - with vanilla JS and with JQuery. — DANIEL, Apr 24 '18 at 02:44

score 6 · Answer 1 · answered Apr 23 '18 at 00:35

6

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());
});

answered Apr 23 '18 at 00:35

CertainPerformance

356,069
52
309
320

Hi @CertainPerformance tks for your precious time and Help! I'm not an expert in JS - but I test the function (copy-paste only) - and didn't works. I have alert messages in the page - like "do you want to cancel this? - YES/NO" or "Do you want to send the email?" - and the submit button is not disable the user send 100 emails clicking.. I know how to disable the button on submit for 1 form (with the form ID) - but I want a solution to disable for all forms - then I dont need to write 10x the same funcition.. tks!! – DANIEL Apr 23 '18 at 00:53
`didn't works` is not very informative, please elaborate? If those alert messages are relevant to the problem, please post the relevant code in your question. I can only see the code you've posted so far. – CertainPerformance Apr 23 '18 at 00:55
I edit the question with the form code. All forms are the same - change only the ID and the ASP page. tks a lot @CertainPerformance – DANIEL Apr 23 '18 at 00:59

TJBlackman · Answer 2 · 2018-04-23T04:13:45.170

3

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();

edited Apr 23 '18 at 04:13

answered Apr 23 '18 at 02:22

TJBlackman

1,895
3
20
46

hi @TJBlackman, tks for your precious time to help me! Works fine, but I need a solution to disable the button ON SUBMIT. to avoid user to click many times. I know how I can do this for each form (using #ID) - but I don't know how I do to any form (and avoid to write 1 function for each form) - do you understand? sorry for my english. TKS! – DANIEL Apr 23 '18 at 03:30

score 2 · Answer 3 · answered Apr 23 '18 at 00:31

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);
});

score 2 · Answer 4 · answered Apr 23 '18 at 00:33

2

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit"/>
<input type="submit"/>
<input type="submit"/>

answered Apr 23 '18 at 00:33

jdgregson

1,457
17
39

Hi @jdgregson. Tks for your precious time and help! I have many alert messages in the page - like "do you want to cancel this? - YES/NO" or "Do you want to send the email?" - and if the submit button is not disable the user send 100 emails clicking.. I know how to disable the button on submit for 1 form (with the form ID) - but I want a solution to disable for all forms - then I dont need to write 10x the same funcition.. tks!! – DANIEL Apr 23 '18 at 00:55

How to disable submit button on submit for many forms - generic function to any form

4 Answers4