Estoy tratando de verificar la selección en el formulario, si la opción seleccionada es efectivo, se envía; de lo contrario, llama a una API y se devuelve una respuesta exitosa, el formulario debe continuar y enviarse
Mi javascript
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") } } }); } }
Puede intentar usar una variable global para almacenar si la llamada AJAX es exitosa
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>