Disabling submit button cancels submit event?

Question

On my client-side page I attach a listener to the submit button:

$(function() {                                                                  
  $('button[type="submit"]').click(submitButtonClicked);                      
});

and I'd like to disable the button and all other form input elements when the button is clicked:

function submitButtonClicked(ev) {                                              
  if ($(this).hasClass('disabled')) {                                           
    return false; // Reject actions when disabled, preventDefault() and stopPropagation()                          
  }                                                                           
  $('form').find('input, select, textarea, button')                       
           .prop('disabled', true) // This call is the culprit?
           .blur();                                                       
  return true; // Submit form.
}

The above function seems to swallow the event, and no form submit arrives at the server. However, if I remove the prop('disabled', true) then the form submits just fine, but also all form elements stay enabled and reactive.

Why is that? I assumed that returning true will cause the event ev to continue propagating, whether or not the button is being disabled.

Rather than disabling the inputs, can you put them into a readonly state as mentioned here: http://stackoverflow.com/questions/7730695/whats-the-difference-between-disabled-disabled-and-readonly-readonly-for-ht. It should be as easy as: `$('form').find('input, select, textarea, button').prop('readonly', true).blur();`. Perhaps that will prevent the user from changing the contents but allow the request to continue processing?... — War10ck, May 13 '16 at 19:30
I don't want to post this as an answer because it doesn't really answer the question at hand. However, as a workaround you could replace `return true` with `$('form').submit()`. I'm getting the same result as you after no longer disabling the button. I assume it's an attempt to prevent a submit from going through unexpectedly. — Devin H., May 13 '16 at 19:42

score 0 · Answer 1 · edited May 13 '16 at 22:20

0

change

$('form').find('input, select, textarea, button')

to

$('form').find('input:not([type=submit]), select, textarea, button')

edited May 13 '16 at 22:20

dippas

58,591
15
114
126

answered May 13 '16 at 19:21

seahorsepip

4,519
1
19
30

Might take a look at the questions again: he's using a `button` ;) – Heretic Monkey May 13 '16 at 19:24
That excludes the submit button from being disabled. Does that mean that a disabling the `submit` button cancels the form? – Jens May 13 '16 at 19:25

42shadow42 · Answer 2 · 2016-05-13T21:00:38.490

0

Because the button element has been disabled the browser uses the disabled property to determine whether to fire the submit event. See the below example where the click event is triggered but the form is not submitted

$("#button").click(function()
{
    console.log("disabling");
    $("#button").prop("disabled", true);
    console.log("disabled");
    return true;
});

$("#form").submit(function(){
    console.log("Submit");
});

$("#button").click();
$("#button").click();

edited May 13 '16 at 21:00

answered May 13 '16 at 19:49

42shadow42

405
2
9

So the event _does_ propagate, but the browser cancels the submit because of the now-disabled `submit` button... ? – Jens May 13 '16 at 19:53
That the way I understand it yes – 42shadow42 May 13 '16 at 19:54
You are correct, according to [this thread](http://stackoverflow.com/questions/7730695/whats-the-difference-between-disabled-disabled-and-readonly-readonly-for-ht#7730719) :) – Jens May 13 '16 at 19:55
I didn't edit it in, but normal click events on the html still fire on both click calls – 42shadow42 May 13 '16 at 19:55

score 0 · Answer 3 · answered May 13 '16 at 21:14

0

Disable your form after form.submit.

...
setTimeout(function(){
    $('form').find('input, select, textarea, button')                       
       .prop('disabled', true);}, 200);//setTimeout
return true;

answered May 13 '16 at 21:14

Alex Kudryashev

9,120
3
27
36

Disabling submit button cancels submit event?

3 Answers3