我有一个包含以下代码的php页面。在我更新隐藏的#amount字段并通过ajax调用发送电子邮件之前，我一直在尝试阻止将违约表单提交到PayPal。
当前的问题是，由于ajax成功方法中的jQuery提交表单调用而导致多次发送电子邮件，并且该表单从未提交给PayPal。
我曾尝试将#process_form按钮更改为键入'button'而不是提交，然后将$（'＃checkout-form'）。submit（function（event）{更改为$（'＃process_form'）。click （function（）{-但我的Ajax电子邮件从未发送过。
帮助表示赞赏。
<form id="checkout-form" name="Payment" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick"/>
<input type="hidden" name="business" value="<?=$pymtEmail?>"/>
<input type="hidden" id="amount" name="amount" value="75.00"/>
<input type="hidden" name="currency_code" value="USD"/>
<input type="hidden" name="item_name" value="xxxxx"/>
<input type="hidden" name="rm" value="0"/>
<input type="hidden" id="random_invoice" name="custom" value="<?php echo rand ( 1000 , 10000 ) ?>"/>
<div id="applicants">
<div class="applicant">
<fieldset>
<legend>Applicant Information</legend>
<div id="name">
<label class="n_first">
<span>First Name:</span>
<input id="applicant_first_name" class="applicant_first_name" name="applicantFirstName" placeholder="" type="text" required>
</label>
<label class="n_last">
<span>Last Name:</span>
<input id="applicant_last_name" class="applicant_last_name" name="applicantLastName" placeholder="" type="text" required>
</label>
</div>
<div>
<label>
<span>Email Address:</span>
<input id="applicant_email" class="applicant_email" name="applicantEmail" placeholder="A working email address must be used or we will not complete your screening." type="email" required>
</label>
</div>
<button id="removebutton" type="button" class='button removeapplicant'>Remove Applicant</button>
</fieldset>
</div>
</div>
<button id="addbutton" type="button" class='button addapplicant'>Add Applicant</button>
<fieldset>
<legend>Billing Information</legend>
<div id="name">
<label class="n_first">
<span>First Name:</span>
<input id="first_name" name="billingFirstName" placeholder="" type="text" autocomplete="given-name" required>
</label>
<label class="n_last">
<span>Last Name:</span>
<input id="last_name" name="billingLastName" placeholder="" type="text" autocomplete="family-name" required>
</label>
</div>
<div>
<label>
<span>Email Address:</span>
<input id="email" name="billingEmail" placeholder="Please provide a working email address." type="email" autocomplete="email" required>
</label>
</div>
<div>
<label>
<span>Phone Number:</span>
<input id="phone_number" name="billingPhone" placeholder="" type="tel" autocomplete="tel" pattern="^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$" required>
</label>
</div>
<div class="checkbox">
<label>
<input id="terms_and_conditions" name="terms_and_conditions" type="checkbox" required>
<span>I agree to the Terms and Conditions (See below: You must agree to continue)</span>
</label>
</div>
</fieldset>
<div>
<button class="button" name="submit" type="submit" id="process_form" data-text="...Submitting">Submit Order</button>
</div>
</form>
<p><br />Questions about this process? Please Call us at <?=$contact_phone?>.</p>
</div>
<div class="clear"></div>
<script>
var counter = 1;
var template = $('#applicants .applicant:first').clone();
var applicantsCount = 1;
//add applicant
$('body').on('click', '.addapplicant', function() {
applicantsCount++;
var applicant = template.clone().find(':input').each(function(){
var newId = this.id + applicantsCount;
$(this).prev().attr('for', newId);
this.id = newId;
this.name = newId;
}).end()
.appendTo('#applicants');
counter = counter + 1;
return false;
});
//remove applicant
$('#applicants').on('click', '.removeapplicant', function() {
$(this).parent().fadeOut(400, function(){
$(this).parent().empty();
return false;
});
counter = counter - 1;
return false;
});
// Submit Form
$('#checkout-form').submit(function(event) {
// Process form before submission
event.preventDefault()
// Update the #amount field for payment (applicants * $75)
//alert('counter: ' + counter);
var total = 0;
total = counter * 75;
$('#amount').val(total);
// Send email with pertinent form information
$.ajax({
method: 'POST',
url: 'http://example.com/sendapplicantinfo',
dataType: 'text',
contentType: 'application/x-www-form-urlencoded',
data : $('#checkout-form').serialize(),
success: function() {
//alert('email sent');
$('#checkout-form').submit();
}
});
});
</script>
答案 0 :(得分：0)
找到了一个可行的答案-有所改善？ 我将#process_form按钮切换回type = button 我添加了另一个（隐藏）提交按钮 我更改了//提交表单代码
代码如下： 提交订单
$('#process_form').click(function(event) {
// Process form before submission
//event.preventDefault()
// Update the #amount field for payment (applicants * $75)
//alert('counter: ' + counter);
var total = 0;
total = counter * 75;
$('#amount').val(total);
// Send email to Gail with all form information
$.ajax({
method: 'POST',
url: 'http://onsitedrugtesting.net/sendapplicantinfo',
dataType: 'text',
contentType: 'application/x-www-form-urlencoded',
data : $('#checkout-form').serialize(),
success: function() {
//alert('email sent');
//$('#checkout-form').submit();
$('#submit_form').trigger('click');
}
});
});