0
我在嘗試使此表單正常工作時遇到了一些麻煩。表格應該驗證每個字段並在提交之前成功收取信用卡費用。Javascript：從異步函數返回false
問題是我無法將我的返回值傳遞給父函數以防止表單提交。我讀this post，並嘗試使用延遲對象，回調函數，並將遍歷所有地方的return語句，但我錯過了一些東西。我已經在這裏待了大約一個星期，而且我感到沮喪。任何人都可以幫助我嗎？我將不勝感激，謝謝！
HTML：
<form onSubmit="return billingfunction1();" name="form5" method="post" action="" id="newform">
</form>
JS：（裁剪尺寸）
function billingfunction1() {
var first_name = $.trim($("#first_name").val());
var last_name = $.trim($("#last_name").val());
var cardtype = $.trim($("#cardtype").val());
var maxlen = 16;
var digits = cardnumber.toString().length;
var submiteval;
if (cardtype == '') {
// alert("Enter Card Type");
$('#cardtype_msg').html('Enter Card Type.');
$('#cardtype').css('border','1px solid #28a616');
$('#cardtype').css('box-shadow','0 0 3px 0 #28a616');
return false;
} else if (nameoncardfirst == '') {
//alert("Enter Name On Card");
$('#nameoncardfirst_msg').html('Enter First Name On Card.');
$('#nameoncardfirst').css('border','1px solid #28a616');
$('#nameoncardfirst').css('box-shadow','0 0 3px 0 #28a616');
return false;
} else if (nameoncardlast == '') {
//alert("Enter Name On Card");
$('#nameoncardlast_msg').html('Enter Last Name On Card.');
$('#nameoncardlast').css('border','1px solid #28a616');
$('#nameoncardlast').css('box-shadow','0 0 3px 0 #28a616');
return false;
} else {
function foo(callback) {
return $.ajax({
url: 'edit_billing2.php',
data: "nameoncardfirst=" + nameoncardfirst+ "&nameoncardlast=" + nameoncardlast + "&street_address2=" + street_address2 +"&city2=" + city2 +"&state=" + state +"&zip=" + zip + "&cardnumber=" + cardnumber + "&expirationdate=" + expirationdate + "&cvv=" + cvv + "&cardtype=" + cardtype+ "&amount=" + amount + "&gender=" + gender + "&first_name=" + first_name + "&last_name=" + last_name + "&address=" + address + "&address2=" + address2 + "&city=" + city + "&post_code=" + post_code + "&country=" + country + "&mobile=" + mobile + "&email=" + email + "&newsletter=" + newsletter + "&make=" + vehicle + "&model=" + model + "&model_year=" + model_year,
success: callback
});
}
function myCallback(response) {
console.log("Success response. Attempting to authorize payment.");
//alert(response);
result = response.split('_');
//alert("Successfully Saved");
alert(result[0]);
if(result[0]=="Your Payment has completed successfully")
{
console.log("Payment Success");
submiteval = true;
}
else
{
console.log("Payment Failed, Aborting form submission.");
submiteval = false;
}
return submiteval;
}
console.log("Valid inputs: attempting to pass via AJAX");
foo(myCallback).done(function(response) {
return submiteval;
});
}
編輯：
我嘗試使用event.preventDefault（）停止提交併手動處理提交，但表單會重新加載當前頁面並跳過一些PHP我表單代碼之前有，我忘了提及：
if (isset($_POST[Submit]))
{
// do registration things
}
我結束了改變$ _ POST [提交]以
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
// do registration things
}
去除我的形式onsubmit屬性：
<form name="form5" method="post" action="" id="newform">
並將其移動到我的提交按鈕：
<input onClick="return billingfunction1();" type="submit" value="Submit"
name="Submit" class="submit_btn">
我的新的回調函數將手動提交表單成功的條件下：
function myCallback(response) {
console.log("Success response. Attempting to authorize payment.");
result = response.split('_');
alert(result[0]);
if(result[0]=="Your Payment has completed successfully") {
console.log("Payment Success");
document.forms["form5"].submit();
} else {
console.log("Payment Failed, Aborting form submission.");
}
}
一切似乎是工作，因爲它應該。非常感謝你的幫助！
沒有什麼可以幫助你在這裏。關於是否取消默認動作的決定必須*同步*。回調，承諾等使異步代碼更容易處理，但它不會使其同步。在這種情況下，典型的解決方案是在異步代碼執行檢查後，始終取消默認操作並在必要時重新觸發事件。很多相關的問題/潛在的重複：https://stackoverflow.com/search?q=%5Bjavascript%5D+prevent+submit+ajax –
我明白了。我一直在思考這些問題，但我遇到的唯一解決方案是使用async：false，但它似乎違背了最佳實踐。取消和重新觸發是要走的路，謝謝！ – DH3