Question

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

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

有更好的编码方法吗？

Answer 1

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

试试这个：

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

Answer 2

我已经看到了一些方法：

点击
禁用提交
在提交时停用表单

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

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

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

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

我选择使用$('form.submit-once')而不是$('form')，因为我的某些表单使用的Ajax应该可以多次提交。

您可以在this jsFiddle上对其进行测试。我在表单中添加了target="_blank"，以便您可以多次测试提交表单。

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

Answer 3

您的代码shouldn't work没有理由。提交表单时，将禁用提交按钮。我在演示中检查了传输到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

接下来的步骤应该是：

使用允许您检查HTTP流量的内容（我最喜欢的是Fiddler）来查看您的表单字段是否实际发送到服务器。如果是，那显然是您服务器上的一个问题。
如果未发送表单字段，则页面中会显示其他内容。发布更多代码，以便我们可以准确了解正在发生的事情。

Answer 4

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

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

Answer 5

我不知道为什么相关代码无法正常工作。这是一个相似而直接的代码段，建议您不要过于复杂。

$("form").submit(function () {
    // prevent duplicate form submissions
    $(this).find(":submit").attr('disabled', 'disabled');
});

对我的好处：

它与HTML5 Form Validation一起很好地工作；
它是以通用方式编写的，因此可以“按原样”重复使用。

Answer 6

什么对我有用......

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

Answer 7

如果您需要添加按钮，则总会有<input type='button'>标记可以提供帮助。如果您不想提交提交按钮，最好的方法是不添加提交按钮。

Answer 8

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

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

}）;

对于链接，您需要添加课程＆＃34;提交＆＃34;。

Answer 9

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

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

所以页面刷新但php没有执行。我现在使用的是具有required属性的其他字段。

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

9 个答案: