Is there a way of submitting this form after using the preventDefault function?-CodePudding

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")
                        }
                    }
                });
            }
        }

CodePudding user response：

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>