有没有办法在使用 preventDefault 函数后提交此表单？

Question

我正在尝试检查表格中的选择，如果选择的选项是现金，它会提交，否则它会调用 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")
                        }
                    }
                });
            }
        }

Answer 1

如果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>

有没有办法在使用 preventDefault 函数后提交此表单？

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

javascript

jquery

preventdefault