blocks|key|1035397|text|我使用以下命令解决了一个非常类似的问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1035398|$("#my_form").submit(function(){
++++$('input[type=submit]').click(function(event){
++++++++event.preventDefault();
++++});
});|code-block|syntax|javascript|1035399|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I solved a very similar issue using:

<pre><code>$("#my_form").submit(function(){
 $('input[type=submit]').click(function(event){
 event.preventDefault();
 });
});
</code></pre>

blocks|key|1250471|text|有可能改进Nathan+Long的approach。您可以将检测已提交表单的逻辑替换为以下逻辑：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1250472|var+lastTime+=+$(this).data("lastSubmitTime");
if+(lastTime+&&+typeof+lastTime+===+"object")+{
++++var+now+=+new+Date();
++++if+((now+-+lastTime)+>+2000)+//+2000ms
++++++++return+true;
++++else
++++++++return+false;
}
$(this).data("lastSubmitTime",+new+Date());
return+true;+//+or+do+an+ajax+call+or+smth+else|code-block|syntax|javascript|1250473|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2830542/prevent-double-submission-of-forms-in-jquery/4473801#4473801^0|H|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

There is a possibility to improve Nathan Long's <a href="https://stackoverflow.com/questions/2830542/prevent-double-submission-of-forms-in-jquery/4473801#4473801">approach</a>.
You can replace the logic for detection of already submitted form with this one:

<pre><code>var lastTime = $(this).data("lastSubmitTime");
if (lastTime &amp;&amp; typeof lastTime === "object") {
 var now = new Date();
 if ((now - lastTime) &gt; 2000) // 2000ms
 return true;
 else
 return false;
}
$(this).data("lastSubmitTime", new Date());
return true; // or do an ajax call or smth else
</code></pre>

blocks|key|1250546|text|我最终使用了这篇文章中的想法，提出了一个与AtZako版本非常相似的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1250547|+jQuery.fn.preventDoubleSubmission+=+function()+{

++++var+last_clicked,+time_since_clicked;

++++$(this).bind('submit',+function(event){

++++if(last_clicked)+
++++++time_since_clicked+=+event.timeStamp+-+last_clicked;

++++last_clicked+=+event.timeStamp;

++++if(time_since_clicked+<+2000)
++++++return+false;

++++return+true;
++});+++
};|code-block|syntax|javascript|1250548|像这样使用：|1250549|$('#my-form').preventDoubleSubmission();|1250550|我发现那些不包含超时而只是禁用提交或禁用表单元素的解决方案造成了问题，因为一旦触发锁定，您就不能再次提交，直到刷新页面。这给我在做ajax工作时带来了一些问题。|1250551|这可能会被美化一点，因为它不是那么花哨。|1250552|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I ended up using ideas from this post to come up with a solution that is pretty similar to AtZako's version.

<pre><code> jQuery.fn.preventDoubleSubmission = function() {

 var last_clicked, time_since_clicked;

 $(this).bind('submit', function(event){

 if(last_clicked) 
 time_since_clicked = event.timeStamp - last_clicked;

 last_clicked = event.timeStamp;

 if(time_since_clicked &lt; 2000)
 return false;

 return true;
 }); 
};
</code></pre>

Using like this: 

<pre><code>$('#my-form').preventDoubleSubmission();
</code></pre>

I found that the solutions that didn't include some kind of timeout but just disabled submission or disabled form elements caused problems because once the lock-out is triggered you can't submit again until you refresh the page. That causes some problems for me when doing ajax stuff.

This can probably be prettied up a bit as its not that fancy.

blocks|key|1250613|text|计时方法是错误的-你如何知道操作将在客户端的浏览器上花费多长时间？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1250614|怎么做？|1250615|$('form').submit(function(){
++$(this).find(':submit').attr('disabled','disabled');
});|code-block|syntax|javascript|1250616|当表单提交时，它将禁用内部的所有提交按钮。|1250617|请记住，在Firefox中，当您禁用按钮时，当您返回历史时，此状态将被记住。例如，为了防止出现这种情况，你必须在页面加载时启用按钮。|1250618|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Timing approach is wrong - how do you know how long the action will take on client's browser?

<h1>How to do it</h1>

<pre><code>$('form').submit(function(){
 $(this).find(':submit').attr('disabled','disabled');
});
</code></pre>

When form is submitted it will disable all submit buttons inside.

Remember, in Firefox when you disable a button this state will be remembered when you go back in history. To prevent that you have to enable buttons on page load, for example.

blocks|key|1250668|text|此代码将在按钮标签上显示加载，并将按钮设置为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1250669|禁用状态，处理后重新启用并返回原来的按钮文本**|1250670|$(function+()+{

++++$(".btn-Loading").each(function+(idx,+elm)+{
++++++++$(elm).click(function+()+{
++++++++++++//do+processing
++++++++++++if+($(".input-validation-error").length+>+0)
++++++++++++++++return;
++++++++++++$(this).attr("label",+$(this).text()).text("loading+....");
++++++++++++$(this).delay(1000).animate({+disabled:+true+},+1000,+function+()+{
++++++++++++++++//original+event+call
++++++++++++++++$.when($(elm).delay(1000).one("click")).done(function+()+{
++++++++++++++++++++$(this).animate({+disabled:+false+},+1000,+function+()+{
++++++++++++++++++++++++$(this).text($(this).attr("label"));
++++++++++++++++++++})
++++++++++++++++});
++++++++++++++++//processing+finalized
++++++++++++});
++++++++});
++++});
++++//+and+fire+it+after+definition
});|code-block|syntax|javascript|1250671|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

this code will display loading on the button label, and set button to

disable state, then after processing, re-enable and return back the original button text**

<pre><code>$(function () {

 $(".btn-Loading").each(function (idx, elm) {
 $(elm).click(function () {
 //do processing
 if ($(".input-validation-error").length &gt; 0)
 return;
 $(this).attr("label", $(this).text()).text("loading ....");
 $(this).delay(1000).animate({ disabled: true }, 1000, function () {
 //original event call
 $.when($(elm).delay(1000).one("click")).done(function () {
 $(this).animate({ disabled: false }, 1000, function () {
 $(this).text($(this).attr("label"));
 })
 });
 //processing finalized
 });
 });
 });
 // and fire it after definition
});
</code></pre>

blocks|key|1250730|text|为Bootstrap+3修改了Nathan的解决方案。这将设置提交按钮的加载文本。此外，它将在30秒后超时，并允许重新提交表单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1250731|jQuery.fn.preventDoubleSubmission+=+function()+{
++$('input[type="submit"]').data('loading-text',+'Loading...');

++$(this).on('submit',function(e){
++++var+$form+=+$(this);

++++$('input[type="submit"]',+$form).button('loading');

++++if+($form.data('submitted')+===+true)+{
++++++//+Previously+submitted+-+don't+submit+again
++++++e.preventDefault();
++++}+else+{
++++++//+Mark+it+so+that+the+next+submit+can+be+ignored
++++++$form.data('submitted',+true);
++++++$form.setFormTimeout();
++++}
++});

++//+Keep+chainability
++return+this;
};

jQuery.fn.setFormTimeout+=+function()+{
++var+$form+=+$(this);
++setTimeout(function()+{
++++$('input[type="submit"]',+$form).button('reset');
++++alert('Form+failed+to+submit+within+30+seconds');
++},+30000);
};|code-block|syntax|javascript|1250732|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Modified Nathan's solution a little for Bootstrap 3. This will set a loading text to the submit button. In addition it will timeout after 30 seconds and allow the form to be resubmitted.

<pre><code>jQuery.fn.preventDoubleSubmission = function() {
 $('input[type="submit"]').data('loading-text', 'Loading...');

 $(this).on('submit',function(e){
 var $form = $(this);

 $('input[type="submit"]', $form).button('loading');

 if ($form.data('submitted') === true) {
 // Previously submitted - don't submit again
 e.preventDefault();
 } else {
 // Mark it so that the next submit can be ignored
 $form.data('submitted', true);
 $form.setFormTimeout();
 }
 });

 // Keep chainability
 return this;
};

jQuery.fn.setFormTimeout = function() {
 var $form = $(this);
 setTimeout(function() {
 $('input[type="submit"]', $form).button('reset');
 alert('Form failed to submit within 30 seconds');
 }, 30000);
};
</code></pre>

blocks|key|1035713|text|请查看jquery-safeform插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1035714|使用示例：|1035715|$('.safeform').safeform({
++++timeout:+5000,++//+disable+next+submission+for+5+sec
++++submit:+function()+{
++++++++//+You+can+put+validation+and+ajax+stuff+here...

++++++++//+When+done+no+need+to+wait+for+timeout,+re-enable+the+form+ASAP
++++++++$(this).safeform('complete');
++++++++return+false;
++++}
});|code-block|syntax|javascript|1035716|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/caxap/jquery-safeform^0|3|F|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Please, check out <a href="https://github.com/caxap/jquery-safeform" rel="noreferrer">jquery-safeform</a> plugin. 

Usage example:

<pre class="lang-js prettyprint-override"><code>$('.safeform').safeform({
 timeout: 5000, // disable next submission for 5 sec
 submit: function() {
 // You can put validation and ajax stuff here...

 // When done no need to wait for timeout, re-enable the form ASAP
 $(this).safeform('complete');
 return false;
 }
});
</code></pre>

blocks|key|1035748|text|使用两个提交按钮。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1035749|<input+id="sub"+name="sub"+type="submit"+value="OK,+Save">
<input+id="sub2"+name="sub2"+type="submit"+value="Hidden+Submit"+style="display:none">|code-block|syntax|javascript|1035750|和jQuery：|1035751|$("#sub").click(function(){
++$(this).val("Please+wait..");
++$(this).attr("disabled","disabled");
++$("#sub2").click();
});|1035752|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Use two submit buttons.

<pre><code>&lt;input id="sub" name="sub" type="submit" value="OK, Save"&gt;
&lt;input id="sub2" name="sub2" type="submit" value="Hidden Submit" style="display:none"&gt;
</code></pre>

And jQuery:

<pre><code>$("#sub").click(function(){
 $(this).val("Please wait..");
 $(this).attr("disabled","disabled");
 $("#sub2").click();
});
</code></pre>

blocks|key|1035817|text|Nathan的代码，但用于jQuery验证插件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1035818|如果您碰巧使用jQuery验证插件，它们已经实现了提交处理程序，在这种情况下，没有理由实现多个提交处理程序。代码：|1035819|jQuery.validator.setDefaults({
++submitHandler:+function(form){
++++//+Prevent+double+submit
++++if($(form).data('submitted')===true){
++++++//+Previously+submitted+-+don't+submit+again
++++++return+false;
++++}+else+{
++++++//+Mark+form+as+'submitted'+so+that+the+next+submit+can+be+ignored
++++++$(form).data('submitted',+true);
++++++return+true;
++++}
++}
});|code-block|syntax|javascript|1035820|您可以轻松地在}+else+{-block中将其展开，以禁用输入和/或提交按钮。|offset|length|style|CODE|1035821|干杯|1035822|entityMap^0|0|0|0|7|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<h2>Nathan's code but for jQuery Validate plugin</h2>

If you happen to use jQuery Validate plugin, they already have submit handler implemented, and in that case there is no reason to implement more than one. The code:

<pre><code>jQuery.validator.setDefaults({
 submitHandler: function(form){
 // Prevent double submit
 if($(form).data('submitted')===true){
 // Previously submitted - don't submit again
 return false;
 } else {
 // Mark form as 'submitted' so that the next submit can be ignored
 $(form).data('submitted', true);
 return true;
 }
 }
});
</code></pre>

You can easily expand it within the <code>} else {</code>-block to disable inputs and/or submit button.

Cheers

blocks|key|1035837|text|我的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1035838|//+jQuery+plugin+to+prevent+double+submission+of+forms
$.fn.preventDoubleSubmission+=+function+()+{
++++var+$form+=+$(this);

++++$form.find('[type="submit"]').click(function+()+{
++++++++$(this).prop('disabled',+true);
++++++++$form.submit();
++++});

++++//+Keep+chainability
++++return+this;
};|code-block|syntax|javascript|1035839|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My solution:

<pre><code>// jQuery plugin to prevent double submission of forms
$.fn.preventDoubleSubmission = function () {
 var $form = $(this);

 $form.find('[type="submit"]').click(function () {
 $(this).prop('disabled', true);
 $form.submit();
 });

 // Keep chainability
 return this;
};
</code></pre>

blocks|key|1250928|text|在我的例子中，表单的onsubmit有一些验证码，所以我增加了包含onsubmit检查点的Nathan+Long回答|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1250929|$.fn.preventDoubleSubmission+=+function()+{
++++++$(this).on('submit',function(e){
++++++++var+$form+=+$(this);
++++++++//if+the+form+has+something+in+onsubmit
++++++++var+submitCode+=+$form.attr('onsubmit');
++++++++if(submitCode+!=+undefined+&&+submitCode+!=+''){
++++++++++++var+submitFunction+=+new+Function+(submitCode);
++++++++++++if(!submitFunction()){
++++++++++++++++event.preventDefault();
++++++++++++++++return+false;
++++++++++++}+++++++++++++++++++
++++++++}

++++++++if+($form.data('submitted')+===+true)+{
++++++++++++/*Previously+submitted+-+don't+submit+again+*/
++++++++++++e.preventDefault();
++++++++}+else+{
++++++++++/*Mark+it+so+that+the+next+submit+can+be+ignored*/
++++++++++$form.data('submitted',+true);
++++++++}
++++++});

++++++/*Keep+chainability*/
++++++return+this;
++++};|code-block|syntax|javascript|1250930|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/4376/nathan-long^0|19|B|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

In my case the form's onsubmit had some validation code, so I increment <a href="https://stackoverflow.com/users/4376/nathan-long">Nathan Long</a> answer including an onsubmit checkpoint 

<pre><code>$.fn.preventDoubleSubmission = function() {
 $(this).on('submit',function(e){
 var $form = $(this);
 //if the form has something in onsubmit
 var submitCode = $form.attr('onsubmit');
 if(submitCode != undefined &amp;&amp; submitCode != ''){
 var submitFunction = new Function (submitCode);
 if(!submitFunction()){
 event.preventDefault();
 return false;
 } 
 }

 if ($form.data('submitted') === true) {
 /*Previously submitted - don't submit again */
 e.preventDefault();
 } else {
 /*Mark it so that the next submit can be ignored*/
 $form.data('submitted', true);
 }
 });

 /*Keep chainability*/
 return this;
 };
</code></pre>

blocks|key|1035954|text|我也遇到过类似的问题，我的解决方案如下。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1035955|如果您没有任何客户端验证，那么您可以简单地使用jquery+one()方法，如这里所述。|1035956|http://api.jquery.com/one/|offset|length|1035957|这会在调用处理程序后禁用它。|1035958|$("#mysavebuttonid").on("click",+function+()+{
++$('form').submit();
});|code-block|syntax|javascript|1035959|如果你像我一样做客户端验证，那就稍微有点麻烦了。上面的示例不会让您在验证失败后再次提交。请尝试此方法|1035960|$("#mysavebuttonid").on("click",+function+(event)+{
++$('form').submit();
++if+(boolFormPassedClientSideValidation)+{
++++++++//form+has+passed+client+side+validation+and+is+going+to+be+saved
++++++++//now+disable+this+button+from+future+presses
++++++++$(this).off(event);
+++}
});|1035961|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|Q|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@$F|12|G|13|1|14]]|A|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|E]]]]

I've been having similar issues and my solution(s) are as follows.

If you don't have any client side validation then you can simply use the jquery one() method as documented here.

<a href="http://api.jquery.com/one/" rel="nofollow">http://api.jquery.com/one/</a> 

This disables the handler after its been invoked.

<pre><code>$("#mysavebuttonid").on("click", function () {
 $('form').submit();
});
</code></pre>

If you're doing client side validation as I was doing then its slightly more tricky. The above example would not let you submit again after failed validation. Try this approach instead

<pre><code>$("#mysavebuttonid").on("click", function (event) {
 $('form').submit();
 if (boolFormPassedClientSideValidation) {
 //form has passed client side validation and is going to be saved
 //now disable this button from future presses
 $(this).off(event);
 }
});
</code></pre>

blocks|key|1036008|text|更改提交按钮：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036009|<input+id="submitButtonId"+type="submit"+value="Delete"+/>|code-block|syntax|javascript|1036010|使用普通按钮：|1036011|<input+id="submitButtonId"+type="button"+value="Delete"+/>|1036012|然后使用点击函数：|1036013|$("#submitButtonId").click(function+()+{
++++++++$('#submitButtonId').prop('disabled',+true);
++++++++$('#myForm').submit();
++++});|1036014|并记住在必要时重新启用按钮：|1036015|$('#submitButtonId').prop('disabled',+false);|1036016|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Change submit button:

<pre><code>&lt;input id="submitButtonId" type="submit" value="Delete" /&gt;
</code></pre>

With normal button:

<pre><code>&lt;input id="submitButtonId" type="button" value="Delete" /&gt;
</code></pre>

Then use click function:

<pre><code>$("#submitButtonId").click(function () {
 $('#submitButtonId').prop('disabled', true);
 $('#myForm').submit();
 });
</code></pre>

And remember re-enable button when is necesary:

<pre><code>$('#submitButtonId').prop('disabled', false);
</code></pre>

blocks|key|1251130|text|在提交时使用简单的计数器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1251131|++++var+submitCounter+=+0;
++++function+monitor()+{
++++++++submitCounter%2B%2B;
++++++++if+(submitCounter+<+2)+{
++++++++++++console.log('Submitted.+Attempt:+'+%2B+submitCounter);
++++++++++++return+true;
++++++++}
++++++++console.log('Not+Submitted.+Attempt:+'+%2B+submitCounter);
++++++++return+false;
++++}|code-block|syntax|javascript|1251132|并在提交表单时调用monitor()函数。|offset|length|style|CODE|1251133|++++<form+action="/someAction.go"+onsubmit="return+monitor();"+method="POST">
++++++++....
++++++++<input+type="submit"+value="Save+Data">
++++</form>|1251134|entityMap^0|0|0|9|9|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Use simple counter on submit.

<pre><code> var submitCounter = 0;
 function monitor() {
 submitCounter++;
 if (submitCounter &lt; 2) {
 console.log('Submitted. Attempt: ' + submitCounter);
 return true;
 }
 console.log('Not Submitted. Attempt: ' + submitCounter);
 return false;
 }
</code></pre>

And call <code>monitor()</code> function on submit the form.

<pre><code> &lt;form action="/someAction.go" onsubmit="return monitor();" method="POST"&gt;
 ....
 &lt;input type="submit" value="Save Data"&gt;
 &lt;/form&gt;
</code></pre>

blocks|key|1036166|text|我不敢相信老式的css指针事件的技巧:没有一个还没有被提及过。我也遇到了同样的问题，添加了一个disabled属性，但这不能回发。尝试下面的方法，并将#SubmitButton替换为提交按钮的ID。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036167|$(document).on('click',+'#SubmitButton',+function+()+{
++++$(this).css('pointer-events',+'none');
})|code-block|syntax|javascript|1036168|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I can't believe the good old fashioned css trick of pointer-events: none hasn't been mentioned yet. I had the same issue by adding a disabled attribute but this doesn't post back. Try the below and replace #SubmitButton with the ID of your submit button.

<pre><code>$(document).on('click', '#SubmitButton', function () {
 $(this).css('pointer-events', 'none');
})
</code></pre>

blocks|key|1036209|text|为什么不这样做呢--这将提交表单，但也会禁用提交按钮，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036210|+++$('#myForm').on('submit',+function(e)+{
+++++++var+clickedSubmit+=+$(this).find('input[type=submit]:focus');
+++++++$(clickedSubmit).prop('disabled',+true);
+++});|code-block|syntax|javascript|1036211|此外，如果您使用的是jQuery验证，则可以将这两行放在if+($('#myForm').valid())下。|offset|length|style|CODE|1036212|entityMap^0|0|0|S|P|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Why not just this -- this will submit the form but also disable the submitting button,

<pre><code> $('#myForm').on('submit', function(e) {
 var clickedSubmit = $(this).find('input[type=submit]:focus');
 $(clickedSubmit).prop('disabled', true);
 });
</code></pre>

Also, if you're using jQuery Validate, you can put these two lines under <code>if ($('#myForm').valid())</code>.

blocks|key|1251258|text|您可以通过以下命令停止第二次提交|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1251259|$("form").submit(function()+{
++++++++//+submit+more+than+once+return+false
++++++++$(this).submit(function()+{
++++++++++++return+false;
++++++++});
++++++++//+submit+once+return+true
++++++++return+true;+//+or+do+what+you+want+to+do
++++});
});|code-block|syntax|javascript|1251260|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can stop the second submit by this

<pre><code>$("form").submit(function() {
 // submit more than once return false
 $(this).submit(function() {
 return false;
 });
 // submit once return true
 return true; // or do what you want to do
 });
});
</code></pre>

blocks|key|1036295|text|只要不导入jQuery验证插件，所有这些解决方案都是可以通过的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036296|例如，如果客户端输入无效输入并提交表单，则无论jQuery验证是否检测到无效输入，该按钮都将被禁用。然后，客户端将不能在修复其输入后重新提交表单。|1036297|此问题的解决方法只使用了一条if语句：|1036298|$('form').submit(function+()+{
++++if+($(this).valid())+{
++++++++$(this).find("input[type='submit']").prop('disabled',+true);
++++}
});|code-block|syntax|javascript|1036299|在将此代码添加到全局导入的JavaScript文件中后，我尝试在我的网站上双重发布表单时失败了。|1036300|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

All of these solutions are passable as long as you're not importing the jQuery validation plugin.
For example, if the client enters invalid input and submits the form, the button will become disabled regardless of whether jQuery validation detects the invalid input. Then the client won't be able to re-submit the form after fixing their input.
The workaround for this issue only took one if statement:
<pre><code>$('form').submit(function () {
 if ($(this).valid()) {
 $(this).find(&quot;input[type='submit']&quot;).prop('disabled', true);
 }
});
</code></pre>
After adding this code to my globally-imported JavaScript file, I was unsuccessful in trying to double-post forms on my website.

I have a form that takes a little while for the server to process. I need to ensure that the user waits and does not attempt to resubmit the form by clicking the button again. I tried using the following jQuery code:

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function() {
 $("form#my_form").submit(function() {
 $('input').attr('disabled', 'disabled');
 $('a').attr('disabled', 'disabled');
 return true;
 });
});
&lt;/script&gt;
</code></pre>

When I try this in Firefox everything gets disabled but the form is not submitted with any of the POST data it is supposed to include. I can't use jQuery to submit the form because I need the button to be submitted with the form as there are multiple submit buttons and I determine which was used by which one's value is included in the POST. I need the form to be submitted as it usually is and I need to disable everything right after that happens.

Thanks!

Prevent double submission of forms in jQuery

验证码

服务器

jQuery

我有一个表单，服务器需要一段时间才能处理。我需要确保用户等待，并且不会通过再次单击按钮来尝试重新提交表单。我尝试使用以下jQuery代码：<script type="text/javascript">$(document).ready(function() { $("form#my_form").submit(f...

问防止在jQuery中重复提交表单
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止在jQuery中重复提交表单EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止在jQuery中重复提交表单
EN