禁用jQuery的提交表单提交

无论出于何种原因按钮，但是这个代码刷新页面，没有任何字段才能发布...禁用jQuery的提交表单提交

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

有编码这更好的办法？

来源

2011-03-26 scarhand

那么，函数执行其操作后，表单就会被提交。这不是你想要的吗？ – EmCo 2011-03-26 21:30:08

所以你试图同时禁用按钮（你是否尝试使用AJAX？）并提交表单字段并询问两者？或者只是禁用。如果页面立即刷新，禁用不起作用。 – justkt 2011-03-26 21:33:16

一旦他们点击“提交”提交按钮应该被禁用，表单应该被提交，并且所有的$ _POST变量都应该被设置。 – scarhand 2011-03-26 21:48:01

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

试试这个：

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

来源

2011-03-26 21:39:22

+13

如果通过其他方式提交表单（例如在文本框中按回车键），这将不起作用。 – josh3736 2011-03-26 21:41:43

也不起作用。我所要做的就是防止人们双重提交表单。 I.E.一旦他们点击“提交”，提交按钮应该被禁用，表单应该被提交，并且所有的$ _POST变量都应该被设置。 – scarhand 2011-03-26 21:47:24

这不适用于Chrome 45.0.2454.99 – 2015-10-12 15:57:01

没有理由代码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）以查看您的表单字段是否实际发送到服务器。如果是的话，这显然是你的服务器上的一个问题。
如果表单字段没有被发送，那么页面中还有其他内容正在发送。发布更多的代码，以便我们可以看到发生了什么。

来源

2011-03-26 22:51:55 josh3736

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

来源

2011-03-27 04:32:39 Bene

什么工作对我来说....

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

来源

2013-04-16 22:35:37 user2288459

我见过几个方法可以做到这一点：

上点击禁用按钮
禁用按钮上提交
禁用形式提交

但没有看到米按预期工作，所以我做了我自己的方法。

添加类到窗体称为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秒内忽略任何进一步的提交。

来源

2014-07-25 13:58:46 rybo111

我喜欢这个解决方案！禁用该按钮似乎取消了HTML5表单字段验证。但是这个解决方案让浏览器运行表单字段验证规则。 – Htbaa 2014-10-14 13:09:27

控制提交的好方法。这种方法没有发现问题。 – 2016-02-04 12:07:23

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

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

}）;

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

来源

2015-09-11 17:42:30

我最终什么事使用，这是工作在Chrome 53：

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

来源

2016-09-20 19:03:10 SaeX

你的代码是正确的。我遇到了同样的问题，但对我来说，问题是在PHP中，而不是JavaScript。如果禁用按钮，它不再与形式发送，我的PHP是依托提交按钮

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

所以刷新页面，但PHP不执行。我现在使用具有required属性的不同字段。

来源

2017-11-16 11:10:28 VeeK

禁用jQuery的提交表单提交

回答

相关问题