表单提交时，jquery禁用提交按钮

For whatever reason, though this code does refresh the page, no fields get posted...

无论出于何种原因，尽管此代码确实刷新了页面，但没有任何字段被发布...

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

Is there a better way of coding this?

有没有更好的编码方式？

8 个解决方案

#1

Your code is changing the submit action of the form. Instead of submitting, it changes the button attribute.

您的代码正在更改表单的提交操作。它不会提交，而是更改按钮属性。

Try this:

尝试这个：

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

#2

I've seen a few ways to do this:

我已经看到了几种方法：

Disable buttons on click
单击时禁用按钮
Disable buttons on submit
在提交时禁用按钮
Disable form on submit
在提交时禁用表单

But none seem to work as expected, so I made my own method.

但似乎没有一个像预期的那样工作，所以我做了自己的方法。

Add a class to your form called submit-once and use the following jQuery:

在表单中添加一个名为submit-once的类，并使用以下jQuery：

$('form.submit-once').submit(function(e){
  if( $(this).hasClass('form-submitted') ){
    e.preventDefault();
    return;
  }
  $(this).addClass('form-submitted');
});

This adds another class to your form: form-submitted. Then, if you try to submit the form again and it has this class, jQuery will prevent the form from submitting and exit the function at return; and thus, nothing gets re-submitted.

这会为您的表单添加另一个类：form-submitted。然后，如果您尝试再次提交表单并且它具有此类，则jQuery将阻止表单提交并在返回时退出该函数;因此，没有任何重新提交。

I chose to use $('form.submit-once') instead of $('form') because some of my forms use Ajax which should be able to submit multiple times.

我选择使用$（'form.submit-once'）而不是$（'form'），因为我的一些表单使用Ajax，它应该能够多次提交。

You can test it out on this jsFiddle. I added target="_blank" to the form so that you can test submitting the form multiple times.

你可以在这个jsFiddle上测试它。我在表单中添加了target =“_ blank”，以便您可以多次测试提交表单。

Side note: you may wish to consider non-JS users by also preventing double submissions server-side. For instance, have a session variable that stores the last submit date/time, and ignore any further submissions within 3 seconds.

旁注：您可能希望通过阻止服务器端的双提交来考虑非JS用户。例如，有一个存储最后提交日期/时间的会话变量，并在3秒内忽略任何进一步的提交。

#3

There is no reason your code shouldn't work. When submitting the form, the submit button is disabled. I checked the headers being transmitted to JSFiddle in the demo, and the form field is indeed being sent (tested in IE and Chrome):

您的代码没有理由不起作用。提交表单时，将禁用提交按钮。我在演示中检查了传输到JSFiddle的标头，并确实发送了表单字段（在IE和Chrome中测试）：

POST http://fiddle.jshell.net/josh3736/YnnGj/show/ HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Referer: http://fiddle.jshell.net/josh3736/YnnGj/show/
Accept-Language: en-US,en;q=0.7,es;q=0.3
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
Host: fiddle.jshell.net
Content-Length: 9
Connection: Keep-Alive
Pragma: no-cache

test=It+works

Your next steps should be:

您的下一步应该是：

Use something that allows you to inspect the HTTP traffic (my favorite is Fiddler) to see if your form fields are actually being sent to the server. If they are, it's obviously a problem on your server.
使用允许您检查HTTP流量的内容（我最喜欢的是Fiddler）来查看您的表单字段是否实际发送到服务器。如果是，那显然是您服务器上的问题。
If the form fields aren't being sent, there's something else going on in your page. Post more of your code so we can see exactly what's happening.
如果未发送表单字段，则页面中还会显示其他内容。发布更多代码，以便我们可以准确地看到发生了什么。

#4

What I ended up using, which is working in Chrome 53:

我最终使用的是Chrome 53中的功能：

$('input[type=submit]').addClass('submit-once').click(function(e){
    if($(this).hasClass('form-submitted') ){
        e.preventDefault();
        return;
    }
    $(this).addClass('form-submitted');
});

#5

What worked for me....

什么对我有用....

$('body').bind('pagecreate', function() {
    $("#signin-btn").bind('click', function() {
        $(this).button('disable');
        showProgress(); // The jquery spinny graphic
        $('form').submit();
    });
});

#6

If you need to add a button, there'S always the tag that could help. If you dont want the submit button to submit, the best way is to not add a submit button.

如果您需要添加一个按钮，总会有标签可以提供帮助。如果您不想提交提交按钮，最好的方法是不添加提交按钮。

#7

A generic solution, for all inputs, buttons and links, using a image loading icon, is:

使用图像加载图标的所有输入，按钮和链接的通用解决方案是：

$(function(){
    $(document).on('click', 'input[type=submit], button[type=submit], a.submit, button.submit', function() {

        // Preserves element width
        var w = $(this).outerWidth();
        $(this).css('width', w+'px');

        // Replaces "input" text with "Wait..."
        if ($(this).is('input'))
            $(this).val('Wait...');

        // Replaces "button" and "a" html with a
        // loading image.
        else if ($(this).is('button') || $(this).is('a'))
            $(this).html('<img style="width: 16px; height: 16px;" src="path/to/loading/image.gif"></img>');            

        // Disables the element.
        $(this).attr('disabled', 'disabled');    

        // If the element IS NOT a link, submits the
        // enclosing form.
        if (!$(this).is('a'))    
            if ($(this).parents('form').length)
                $(this).parents('form')[0].submit();

        return true;
    })

});

}）;

For links you need to add the class "submit".

对于链接，您需要添加“提交”类。

#8

Your code is fine. I ran into this same problem but for me the issue was in the php, not javascript. When you disable the button it is no longer sent with the form and my php was relying on the submit button

你的代码很好。我遇到了同样的问题，但对我来说问题是在PHP，而不是JavaScript。当您禁用该按钮时，它不再与表单一起发送，我的PHP依赖于提交按钮

if(isset($_POST['submit'])){
   ...
}

So the page refreshes but php doesn't execute. I'm now using a different field which has required attribute.

所以页面刷新但php不执行。我现在正在使用具有必需属性的不同字段。

#1