jQuery jquery在表单提交时禁用提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5445431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery disable submit button on form submission
提问by scarhand
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?
有没有更好的编码方式？
回答by Diodeus - James MacFarlane
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();
});
回答by rybo111
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-onceand 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 将阻止表单提交并退出函数，return;因此不会重新提交任何内容。
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 秒内忽略任何进一步的提交。
回答by naXa
I don't know why the code in question does not work. Here's a similar and straightforward code snippet and I advise you to not overcomplicate things.
我不知道为什么有问题的代码不起作用。这是一个类似且简单的代码片段，我建议您不要将事情复杂化。
$("form").submit(function () {
// prevent duplicate form submissions
$(this).find(":submit").attr('disabled', 'disabled');
});
Advantages for me:
对我来说的优势：
- it works nice with HTML5 Form Validation;
- it's written in a generic way so it can be re-used "as is".
- 它适用于 HTML5表单验证；
- 它以通用方式编写，因此可以“按原样”重新使用。
回答by josh3736
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.
- 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.
- 使用允许您检查 HTTP 流量（我最喜欢的是Fiddler）的东西来查看您的表单字段是否确实被发送到服务器。如果是，那显然是您服务器上的问题。
- 如果未发送表单字段，则您的页面中还有其他内容。发布更多您的代码，以便我们可以确切了解发生了什么。
回答by SaeX
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');
});
回答by user2288459
What worked for me....
什么对我有用....
$('body').bind('pagecreate', function() {
$("#signin-btn").bind('click', function() {
$(this).button('disable');
showProgress(); // The jquery spinny graphic
$('form').submit();
});
});
回答by Bene
If you need to add a button, there'S always the <input type='button'>tag that could help. If you dont want the submit button to submit, the best way is to not add a submit button.
如果您需要添加按钮，总有一个<input type='button'>标签可以提供帮助。如果不想让提交按钮提交，最好的办法就是不要添加提交按钮。
回答by VeeK
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 requiredattribute.
所以页面刷新但 php 不执行。我现在正在使用具有required属性的不同字段。
回答by Arivan Bastos
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".
对于链接，您需要添加“提交”类。
