我试图检查表单中的选择，如果选择的选项是现金，它提交，否则它调用API，如果返回成功响应，表单应该继续并提交
我Javascipt
document.getElementById('myform').addEventListener('submit', checkPayment);
function checkPayment(event) {
var payment = document.getElementById('payment').value;
var phone = document.getElementById('phone').value;
if (payment == "Cash") {
alert("Paying with Cash!");
} else {
alert("Paying with Mpesa!");
var valid = false;
event.preventDefault();
$.ajax({
url: 'payment/MpesaProcessor.php',
type: 'POST',
data: {
'amount': $('#parkingcharge').val(),
'phone': $('#phone').val(),
},
success: function(text) {
console.log(text);
if (text == "success") {
alert("Click Ok Once Payment Has been Received");
event.preventDefault();
$('#myform').submit();
} else {
alert("Payment Not Successful")
}
}
});
}
}
您可以尝试使用全局变量来存储AJAX调用是否成功
document.getElementById('myform').addEventListener('submit', checkPayment);
var isSuccess = false;
function checkPayment(event) {
var payment = document.getElementById('payment').value;
var phone = document.getElementById('phone').value;
if (payment == "Cash") {
alert("Paying with Cash!");
} else {
alert("Paying with Mpesa!");
var valid = false;
if (isSuccess) {
return;
}
event.preventDefault();
$.ajax({
url: 'payment/MpesaProcessor.php',
type: 'POST',
data: {
'amount': $('#parkingcharge').val(),
'phone': $('#phone').val(),
},
success: function(text) {
console.log(text);
if (text == "success") {
alert("Click Ok Once Payment Has been Received");
isSuccess = true;
$('#myform').submit();
} else {
alert("Payment Not Successful")
}
}
});
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<form id="myform">
<select id="payment">
<option value="Cash" >
Cash
</option>
<option value="Mpesa" >
Mpesa
</option>
</select>
<input id="parkingcharge" type="number" step="any" />
<input id="phone" />
<input type="submit"/>
</form>
</body>
</html>