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

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
– John John, Commented Nov 23, 2013 at 1:36

stanleyxu2005 · Accepted Answer · 2014-09-24 14:55:44Z

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, 2014 at 14:55

stanleyxu2005

8,31115 gold badges61 silver badges99 bronze badges

answered Nov 23, 2013 at 1:29

Comfortably Numb

39.9k17 gold badges82 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John John Over a year ago

so do u mean my approach is wrong ? and can u advice how i can disable on submit event ?

Comfortably Numb Over a year ago

The premise is correct, but as you can see it doesn't work in all browsers. Here's a small demo of alternative: jsfiddle.net/atd7X

John John Over a year ago

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 ?

kwoxer · Accepted Answer · 2016-05-23 12:24:14Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related