简体   繁体   English

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

[英]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 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. 上述脚本在IE和Firefox上运行良好,但在Chrome上我无法提交表单,因为当用户点击提交按钮时,该按钮将被禁用,但表单将不会被提交。 Any idea how I can solve this issue on Chrome? 知道如何在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="http://www.microsoft.com">
  <input class="btn-primary" type="submit" value="submit"/>
</form>


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

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. 因此PHP提交代码不会被多次调用。 That submit is running on a Drupal Backend, in my case as a custom submit_hook . 该提交正在Drupal Backend上运行,在我的例子中是一个自定义的submit_hook But for sure working in any other CMS. 但肯定在任何其他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. 真正的问题是,Javascript代码正在禁用该按钮,谷歌浏览器认为按钮已完全死亡,而不仅仅是禁用。 So it does not fire any code anymore. 所以它不再激发任何代码。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM