阻止AJAX表单提交两次? [英] Prevent AJAX form from submitting twice?
问题描述
我不知道为什么此AJAX表单要处理两次并发送一封电子邮件.您可以看到导致这种情况发生的代码中是否存在某种明显的重组?
HTML
< form class ="submit-form" method ="post"><输入type ="url" class ="content-link" name ="content_link"占位符="Link"/><输入type ="email" class ="email" name ="email" placeholder =您的电子邮件地址"/>< button class ="submit-modal-button提交按钮">< span>发送< span class ="ss-icon"> send</span></span></button>< p class ="terms">通过单击提交，您同意我们的& nbsp;< a href =<?php echo home_url('terms-of-use');?>">条款&;条件</a</p></form> JavaScript
processSubmitModal:function(){var form = $('.submit-form')，content_link = $('.submit-form input [type ="url"]')，email = $('.submit-form input [type ="email"]')，viewport_size = $(window).width()+"x" + $(window).height()，user_browser = BrowserDetect.browser，user_os = BrowserDetect.OS，current_page = document.location.href;$('.submit-form input [type ="url"] ,. submit-form input [type ="email"]').blur(function(){如果($ .trim($(this).val())==''){$(this).addClass('form-validation-error');返回false；} 别的 {$(this).removeClass('form-validation-error');}});form.submit(function(){if($ .trim(content_link.val())==''&& $ .trim(email.val())==''){content_link.addClass('form-validation-error');email.addClass('form-validation-error');返回false；}否则if($ .trim(content_link.val())==''){content_link.addClass('form-validation-error');返回false；}否则if($ .trim(email.val())==''){email.addClass('form-validation-error');返回false；} 别的 {var env = TTB.getEnvironment();$('.submit-modal-button').attr('disabled'，'disabled');$(document).ajaxStart(function(){$('.submit-modal .screen-1').delay(300).append('< span class ="loading2"></span&';));});$ .ajax({网址:env.submit_modal_process，输入:"POST"，数据: {content_link:content_link.val()，电子邮件:email.val()，viewportsize:viewport_size，浏览器:user_browser，操作系统:user_os，当前页:当前页}，成功:功能(){$('.submit-modal .screen-1').delay(1000).fadeOut(300，function(){$('.submit-modal .screen-1').fadeOut(500，function(){$('span.loading2').detach();$('.submit-modal .screen-2').fadeIn(500，function(){$('.submit-modal .screen-2').append('< img class ="carlton" src ='+ env.the_environment + TTB.config.image_path()+'submit-modal-success.gif'+'/>');});$('.submit-modal .screen-2').css('display'，'block').delay(4200).fadeOut(500，function(){$('.carlton').hide();$('.submit-modal .screen-1').fadeIn(500);content_link.val('');email.val('');content_link.focus();email.removeClass('form-validation-error');$('.submit-modal-button').removeAttr('disabled');});});});}});返回false；}});}Example.processSubmitModal(); 如果要从您的摘要中删除所有与问题代码无关的内容，我们将获得以下信息:
HTML
< form class ="submit-form" method ="post"><输入type ="url" name ="content_link"/><输入type ="email" name ="email"/>< button>发送</button></form> JavaScript
$(function(){var EXAMPLE = {processSubmitModal:function(){var form = $('.submit-form')，content_link = $('.submit-form input [type ="url"]')，email = $('.submit-form input [type ="email"]');form.submit(function(){$ .ajax({网址:document.location.href，输入:"POST"，数据: {content_link:content_link.val()，电子邮件:email.val()}，成功:函数(){//<-被执行两次的函数//做一点事}});返回false；});}};Example.processSubmitModal();//在代码段中未显示的代码中的某处...Example.processSubmitModal();}); 我玩弄了您的代码片段，它始终仅执行一次AJAX调用并处理 I can't figure out why this AJAX form is processing and sending out an email twice. Is there some sort of obvious hickup in the code you can see causing this to occur? HTML JavaScript
If to remove all non relevant to the issue code from your snippets we will get the following: HTML JavaScript I played around with your snippet and it always performs only one AJAX call and process 这篇关于阻止AJAX表单提交两次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ email 一次，唯一的情况除外-在代码中的某处您调用 EXAMPLE.processSubmitModal()再次.在您的代码中搜索，几乎可以确定这是原因.请注意，每次调用 EXAMPLE.processSubmitModal()时，您都会添加另一个处理程序到表单的 submit 事件中，而不要覆盖它./p><form class="submit-form" method="post">
<input type="url" class="content-link" name="content_link" placeholder="Link" />
<input type="email" class="email" name="email" placeholder="Your Email Address" />
<button class="submit-modal-button submit-button"><span>Send<span class="ss-icon">send</span></span></button>
<p class="terms">By clicking Submit you agree to our <a href="<?php echo home_url('terms-of-use'); ?>">Terms & Conditions</a></p>
</form>
processSubmitModal : function () {
var form = $('.submit-form'),
content_link = $('.submit-form input[type="url"]'),
email = $('.submit-form input[type="email"]'),
viewport_size = $(window).width() + "x" + $(window).height(),
user_browser = BrowserDetect.browser,
user_os = BrowserDetect.OS,
current_page = document.location.href;
$('.submit-form input[type="url"],.submit-form input[type="email"]').blur(function () {
if ($.trim($(this).val()) == '') {
$(this).addClass('form-validation-error');
return false;
} else {
$(this).removeClass('form-validation-error');
}
});
form.submit(function () {
if ($.trim(content_link.val()) == '' && $.trim(email.val()) == '') {
content_link.addClass('form-validation-error');
email.addClass('form-validation-error');
return false;
}
else if ($.trim(content_link.val()) == '') {
content_link.addClass('form-validation-error');
return false;
}
else if ($.trim(email.val()) == '') {
email.addClass('form-validation-error');
return false;
} else {
var env = TTB.getEnvironment();
$('.submit-modal-button').attr('disabled','disabled');
$(document).ajaxStart(function () {
$('.submit-modal .screen-1').delay(300).append('<span class="loading2"></span>');
});
$.ajax({
url: env.submit_modal_process,
type: 'POST',
data: {
content_link: content_link.val(),
email: email.val(),
viewportsize: viewport_size,
browser: user_browser,
os: user_os,
current_page: current_page
},
success: function () {
$('.submit-modal .screen-1').delay(1000).fadeOut(300, function () {
$('.submit-modal .screen-1').fadeOut(500, function () {
$('span.loading2').detach();
$('.submit-modal .screen-2').fadeIn(500, function () {
$('.submit-modal .screen-2').append('<img class="carlton" src=' + env.the_environment + TTB.config.image_path() + 'submit-modal-success.gif' + ' />');
});
$('.submit-modal .screen-2').css('display','block').delay(4200).fadeOut(500, function () {
$('.carlton').hide();
$('.submit-modal .screen-1').fadeIn(500);
content_link.val('');
email.val('');
content_link.focus();
email.removeClass('form-validation-error');
$('.submit-modal-button').removeAttr('disabled');
});
});
});
}
});
return false;
}
});
}
EXAMPLE.processSubmitModal();
<form class="submit-form" method="post">
<input type="url" name="content_link" />
<input type="email" name="email" />
<button>Send</button>
</form>
$(function() {
var EXAMPLE = {
processSubmitModal : function () {
var form = $('.submit-form'),
content_link = $('.submit-form input[type="url"]'),
email = $('.submit-form input[type="email"]');
form.submit(function () {
$.ajax({
url: document.location.href,
type: 'POST',
data: {
content_link: content_link.val(),
email: email.val()
},
success: function () { // <-- The function that is executed twice
// Do something
}
});
return false;
});
}
};
EXAMPLE.processSubmitModal();
// And somewhere in the code that was not presented in snippet...
EXAMPLE.processSubmitModal();
});
email once except the only case - when somewhere in the code you call EXAMPLE.processSubmitModal() once again. Search in your code, I'm almost sure it is the reason. Pay attention that each time you call EXAMPLE.processSubmitModal() you add one another handler to submit event of the form and not override it.
