Disabling a submit button when clicking on it , will prevent the form from being submitted on Google Chrome

Question

I have added the following script to my layout view, inside my asp.net mvc :-

$(document).ready(function () {
    $('.btn.btn-primary').click(function () {
        $(this).prop("disabled", true);
        if (!$('form').valid()) {
            $(this).prop("disabled", false);
            return false;
        }
    });
    $('form').change(function () {
        $('.btn.btn-primary').prop("disabled", false);
    });

The aim of my script is to disable the submit buttons , and re-enable them if the model is not valid or if the user change a form value. The above script will work well on IE & Firefox, but on Chrome I am unable to submit the form , as when the user clicks on the submit button , the button will be disable but the form will not be submitted. Any idea how I can solve this issue on Chrome?

the link u provide is talking about different problem. in my case i am able to disable the button on chrome. but my problem is that the form will not be submitted.. — John John, Nov 23 '13 at 01:36

score 36 · Accepted Answer · edited Sep 24 '14 at 14:55

36

Instead disabling button in button's click event - disable it in form's submit event (you can check form for validity there as well).

This way it will work universally in all browsers.

<form action="http://www.microsoft.com">
  <input class="btn-primary" type="submit" value="submit"/>
</form>


$('form').submit(function() {
  $('input.btn-primary').prop("disabled", "disabled");
})

edited Sep 24 '14 at 14:55

stanleyxu2005

8,081
14
59
94

answered Nov 23 '13 at 01:29

Yuriy Galanter

38,833
15
69
136

so do u mean my approach is wrong ? and can u advice how i can disable on submit event ? – John John Nov 23 '13 at 01:32
3

The premise is correct, but as you can see it doesn't work in all browsers. Here's a small demo of alternative: http://jsfiddle.net/atd7X/ – Yuriy Galanter Nov 23 '13 at 01:39
this worked well on chrome and IE & Forefox. so i should now be on the safe side ? or there is other limitation of using you code ? – John John Nov 23 '13 at 01:50

score 6 · Answer 2 · answered May 23 '16 at 12:24

I just had the same issue that the Google Chrome was not fireing my submit event when the button got disabled via jQuery.

Background info: I have a form with a button that shall be disabled whenever clicked. So the PHP submit code is not called multiple times. That submit is running on a Drupal Backend, in my case as a custom submit_hook. But for sure working in any other CMS. But that's not the issue. The real issue is that the Javascript code is disabling the button and Google Chrome thinks that the button is totally dead and not just disabled. So it does not fire any code anymore.

But that issue is pretty easy to fix.

So this code is working on Firefox/IE:

(function($) {
Drupal.behaviors.somebehaviour = {
    attach: function(context, settings) {
        $('#edit-submit').click(function (e) {
            $('#edit-submit').val('Is saved...');
            $('#edit-submit').prop('disabled', 'disabled');
        });
    }
};
})(jQuery);

and getting it running on Chrome as well, you need to add the line:

$(this).parents('form').submit();

so for this example it would finally be:

(function($) {
Drupal.behaviors.somebehaviour = {
    attach: function(context, settings) {
        $('#edit-submit').click(function (e) {
            $('#edit-submit').val('Is saved...');
            $('#edit-submit').prop('disabled', 'disabled');
            $(this).parents('form').submit();
        });
    }
};
})(jQuery);

I liked this answer, it allowed me to handle this in my generic event handler rather than putting it into the form submission — Gary Richter, Mar 09 '18 at 18:39

Disabling a submit button when clicking on it , will prevent the form from being submitted on Google Chrome

2 Answers2

Linked