表单提交时，jquery禁用提交按钮
无论出于何种原因，尽管此代码确实刷新了页面，但没有任何字段被发布…
$('form').submit(function(){ $('input[type=submit]', this).attr('disabled', 'disabled'); }); 有没有更好的编码方式？
您的代码正在更改表单的提交操作。 它不会提交，而是更改按钮属性。
试试这个：
$('input[type=submit]').click(function() { $(this).attr('disabled', 'disabled'); $(this).parents('form').submit() })
我已经看到了几种方法：
- 单击时禁用按钮
- 在提交时禁用按钮
- 在提交时禁用表单
但似乎没有一个像预期的那样工作，所以我做了自己的方法。
在表单中添加一个名为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;退出该函数return; 因此，没有任何重新提交。
我选择使用$('form.submit-once')而不是$('form')因为我的一些表单使用Ajax，它应该能够多次提交。
你可以在这个jsFiddle上测试它。 我在表单中添加了target="_blank" ，以便您可以多次测试提交表单。
旁注：您可能希望通过阻止服务器端的双提交来考虑非JS用户。 例如，有一个存储最后提交日期/时间的会话变量，并在3秒内忽略任何进一步的提交。
您的代码没有理由不起作用 。 提交表单时，将禁用提交按钮。 我在演示中检查了传输到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 ）来查看您的表单字段是否实际发送到服务器。 如果是，那显然是您服务器上的问题。
- 如果未发送表单字段，则页面中还会显示其他内容。 发布更多代码，以便我们可以准确地看到发生了什么。
我最终使用的是Chrome 53中的function：
$('input[type=submit]').addClass('submit-once').click(function(e){ if($(this).hasClass('form-submitted') ){ e.preventDefault(); return; } $(this).addClass('form-submitted'); });
什么对我有用….
$('body').bind('pagecreate', function() { $("#signin-btn").bind('click', function() { $(this).button('disable'); showProgress(); // The jquery spinny graphic $('form').submit(); }); });
如果您需要添加一个按钮，总会有标签可以提供帮助。 如果您不想提交提交按钮，最好的方法是不添加提交按钮。
使用图像加载图标的所有输入，按钮和链接的通用解决方案是：
$(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('
'); // 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; })
}）;
对于链接，您需要添加“提交”类。
你的代码很好。 我遇到了同样的问题，但对我来说问题是在PHP，而不是JavaScript。 当您禁用该按钮时，它不再与表单一起发送，我的PHP依赖于提交按钮
if(isset($_POST['submit'])){ ... }
所以页面刷新但php不执行。 我现在正在使用具有required属性的不同字段。