在提交表单时禁用提交按钮

I wrote this code to disable submit buttons on my website after the click:

我写这段代码是为了在点击后禁用我网站上的提交按钮:

$('input[type=submit]').click(function(){
    $(this).attr('disabled', 'disabled');
});

Unfortunately, it doesn't send the form. How can I fix this?

不幸的是，它没有发送表单。我该怎么解决这个问题呢?

EDIT I'd like to bind the submit, not the form :)

我想绑定提交，而不是表单:)

11 个解决方案

#1

130

Do it onSubmit():

做onSubmit():

$('form#id').submit(function(){
    $(this).find(':input[type=submit]').prop('disabled', true);
});

What is happening is you're disabling the button altogether before it actually triggers the submit event.

现在的情况是，在按钮触发提交事件之前，您要完全禁用该按钮。

You should probably also think about naming your elements with IDs or CLASSes, so you don't select all inputs of submit type on the page.

您可能还应该考虑使用id或类来命名元素，这样就不会在页面上选择提交类型的所有输入。

Demonstration: http://jsfiddle.net/userdude/2hgnZ/

示范:http://jsfiddle.net/userdude/2hgnZ/

(Note, I use preventDefault() and return false so the form doesn't actual submit in the example; leave this off in your use.)

(注意，我使用了preventDefault()并返回false，因此该表单在本例中没有实际提交;在你使用的时候把它关掉。

#2

Specifically if someone is facing problem in Chrome

特别是当有人在Chrome上遇到问题的时候

What you need to do to fix this is to use the onSubmit tag in the element to set the submit button to disabled. This will allow Chrome to disable the button immediately after it is pressed and the form submission will still go ahead....

要修复这个问题，需要使用元素中的onSubmit标记将submit按钮设置为已禁用。这将允许浏览器禁用按钮后立即按下和表单提交仍将继续....

e.g.

如。

<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;"> 
     <input type="submit" name="submit" value="Submit" id="submit"> 
</form>

#3

Disabled controls do not submit their values which does not help in knowing if the user clicked save or delete.

禁用控件不提交它们的值，这无助于了解用户是否单击save或delete。

So I store the button value in a hidden which does get submitted. The name of the hidden is the same as the button name. I call all my buttons by the name of button.

所以我将按钮值保存在一个隐藏的地方，它会被提交。隐藏的名称与按钮名称相同。我按按钮的名字调用所有的按钮。

E.g. <button type="submit" name="button" value="save">Save</button>

Based on this I found here. Just store the clicked button in a variable.

基于这个，我在这里找到了。只需将单击的按钮存储在一个变量中。

$(document).ready(function(){
    var submitButton$;

    $(document).on('click', ":submit", function (e)
    {
        // you may choose to remove disabled from all buttons first here.
        submitButton$ = $(this);
    });

    $(document).on('submit', "form", function(e)
    {
        var form$ = $(this);
        var hiddenButton$ = $('#button', form$);
        if (IsNull(hiddenButton$))
        {
            // add the hidden to the form as needed
            hiddenButton$ = $('<input>')
                .attr({ type: 'hidden', id: 'button', name: 'button' })
                .appendTo(form$);
        }
        hiddenButton$.attr('value', submitButton$.attr('value'));
        submitButton$.attr("disabled", "disabled");
    }
});

Here is my IsNull function. Use or substitue your own version for IsNull or undefined etc.

这是IsNull函数。使用或替换您自己的版本，以获得IsNull或未定义等。

function IsNull(obj)
{
    var is;
    if (obj instanceof jQuery)
        is = obj.length <= 0;
    else
        is = obj === null || typeof obj === 'undefined' || obj == "";

    return is;
}

#4

This should take care of it in your app.

这应该在你的应用中解决。

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

#5

Simple and effective solution is

简单有效的解决办法是

<form ... onsubmit="myButton.disabled = true; return true;">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Source: here

来源:这里

#6

Your code actually works on FF, it doesn't work on Chrome.

你的代码实际上在FF上工作，它在Chrome上不起作用。

This works on FF and Chrome.

这适用于FF和Chrome。

$(document).ready(function() {
        // Solution for disabling the submit temporarily for all the submit buttons.
        // Avoids double form submit.
        // Doing it directly on the submit click made the form not to submit in Chrome.
        // This works in FF and Chrome.
        $('form').on('submit', function(e){
          //console.log('submit2', e, $(this).find('[clicked=true]'));
          var submit = $(this).find('[clicked=true]')[0];
          if (!submit.hasAttribute('disabled'))
          {
            submit.setAttribute('disabled', true);
            setTimeout(function(){
              submit.removeAttribute('disabled');
            }, 1000);
          }
          submit.removeAttribute('clicked');
          e.preventDefault();
        });
        $('[type=submit]').on('click touchstart', function(){
          this.setAttribute('clicked', true);
        });
      });
    </script>

#7

How to disable submit button

如何禁用提交按钮

just call a function on onclick event and... return true to submit and false to disable submit. OR call a function on window.onload like :

只要调用onclick事件上的函数…返回true提交，返回false禁用提交。或者调用窗口上的函数。onload:

window.onload = init();

and in init() do something like this :

在init()中，执行如下操作:

var theForm = document.getElementById(‘theForm’);
theForm.onsubmit =  // what ever you want to do

#8

As said before, if you add the disabled attribute on the submit button, the data will not be sent.

如前所述，如果在submit按钮上添加禁用属性，则不会发送数据。

The trick from @Valamas works, but I found a solution which is very easy to implement:

@Valamas的这个技巧很管用，但我找到了一个很容易实现的解决方案:

$('#yourform').submit(function(){
    $('#mySubmitButton').addClass('disabled');
});

And you define the disabled class in CSS like that:

你在CSS中定义了禁用类

.disabled{
    cursor:not-allowed;
}

This will do the same as disabled="disabled", but without the consequences on the sent data.

这与disabled="disabled"相同，但不影响发送数据。

#9

The following worked for me:

以下是我的工作经验:

var form_enabled = true;
$().ready(function(){
       // allow the user to submit the form only once each time the page loads
       $('#form_id').on('submit', function(){
               if (form_enabled) {
                       form_enabled = false;
                       return true;
               }

               return false;
        });
});

This cancels the submit event if the user tries to submit the form multiple times (by clicking a submit button, pressing Enter, etc.)

这将取消提交事件，如果用户尝试多次提交表单(单击submit按钮，按Enter，等等)。

#10

I have been using blockUI to avoid browser incompatibilies on disabled or hidden buttons.

我一直在使用blockUI来避免禁用或隐藏按钮上的浏览器不兼容。

http://malsup.com/jquery/block/#element

http://malsup.com/jquery/block/元素

Then my buttons have a class autobutton:

然后我的按钮有一个类自动按钮:

  $(".autobutton").click(
     function(event) {
        var nv = $(this).html();
        var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
        $(this).html(nv2);
        var form = $(this).parents('form:first');

        $(this).block({ message: null });
        form.submit();                
        });

Then a form is like that:

那么一个表单是这样的:

<form>
....
<button class="autobutton">Submit</button>   
</form>

#11

A more simplier way. I've tried this and it worked fine for me:

一个更简单的方法。我试过这个，效果很好:

$(':input[type=submit]').prop('disabled', true);

#1

130