调用preventDefault阻止表单提交后，如何触发表单正常提交？

核心实现逻辑 #

• 支付方式选择Cash时，直接提交表单无需额外处理
• 支付方式为其他选项时，先拦截表单默认提交行为，调用支付API，接口返回成功响应后再主动触发表单提交

优化后可直接使用的代码 #

// 新增标志位，避免支付成功后触发重复校验
let isPaid = false;

document.getElementById('myform').addEventListener('submit', checkPayment);

function checkPayment(event) {
    // 如果已经完成支付校验，直接放行提交
    if (isPaid) return;
    
    const payment = document.getElementById('payment').value;
    if (payment === "Cash") {
        alert("Paying with Cash!");
        return;
    }
    
    // 非现金支付先拦截表单提交
    event.preventDefault();
    alert("Paying with Mpesa!");
    
    $.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");
                // 标记校验已完成，避免再次进入校验逻辑
                isPaid = true;
                // 主动触发表单提交
                $('#myform').submit();
            } else {
                alert("Payment Not Successful");
            }
        },
        error: function() {
            alert("支付接口请求失败，请稍后重试");
        }
    });
}

优化说明 #

• 新增isPaid标志位，解决原有代码中支付成功后调用submit()会再次触发submit事件、进入死循环的问题
• 移除了success回调中多余的event.preventDefault()，无需在提交时重复拦截
• 补充了ajax异常处理逻辑，避免接口请求失败时无用户提示
• 调整了逻辑判断的层级，减少不必要的嵌套，代码可读性更高

内容的提问来源于stack exchange，提问作者Billy Dan