单击时禁用提交按钮将阻止在Google Chrome上提交表单

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

我在我的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?

我的脚本的目的是禁用提交按钮,并在模型无效或用户更改表单值时重新启用它们。上述脚本在IE和Firefox上运行良好,但在Chrome上我无法提交表单,因为当用户点击提交按钮时,该按钮将被禁用,但表单将不会被提交。知道如何在Chrome上解决这个问题吗?

2 个解决方案

#1

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

#2

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

我刚刚遇到了同样的问题,当按钮被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.

背景信息:我有一个带有按钮的表单,只要单击该按钮就会被禁用。因此PHP提交代码不会被多次调用。该提交正在Drupal后端运行,在我的例子中是一个自定义的submit_hook。但肯定在任何其他CMS工作。但那不是问题。真正的问题是,Javascript代码正在禁用该按钮,而Google Chrome认为该按钮已完全耗尽,而不仅仅是已禁用。所以它不再触发任何代码。

But that issue is pretty easy to fix.

但是这个问题很容易解决。

So this code is working on Firefox/IE:

所以这段代码适用于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:

并让它在Chrome上运行,您需要添加以下行:

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

#1