john G john G - 7 months ago 27
jQuery Question

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

I have added the following script to my layout view, inside my 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?


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="">
  <input class="btn-primary" type="submit" value="submit"/>

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