我有一个包含以下代码的php页面。我正在尝试阻止向PayPal提交 deafault 表单，直到我更新了隐藏的 #amount 字段并通过 ajax 调用发送电子邮件。
当前的问题是，由于 ajax 成功方法中的 jquery 提交表单调用，电子邮件被多次发送，并且表单永远不会提交给PayPal。
我曾尝试将#process_form按钮更改为键入"按钮"而不是提交，并将$("#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="^(?:(?:+?1s*(?:[.-]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>
找到一个有效的答案 - 改进？ 我将#process_form按钮切换回类型=按钮 我添加了另一个(隐藏的)提交按钮 我更改了//提交表单代码
代码如下： 提交订单
$('#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');
}
});
});