I am trying to check for selection in form, if selected option is cash, it submits else it calls an API and onse success response is returned the form should go ahead and submit
My 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")
}
}
});
}
}
You can try using a global variable to store if AJAX call is successfull
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>