使用 preventDefault 功能后有没有办法提交这个表单？
Posted
技术标签:
【中文标题】使用 preventDefault 功能后有没有办法提交这个表单？【英文标题】：Is there a way of submitting this form after using the preventDefault function? 【发布时间】：2021-12-09 15:55:59 【问题描述】：我正在尝试检查表单中的选择，如果选择的选项是现金，它会提交，否则它会调用 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")
);
【问题讨论】：
使用表单原生的submit方法，不会再次触发验证。
你能解释更多吗@Teemu
更多？你想知道什么？只需在 AJAX success 方法中执行 $('#myform')[0].submit(); 而不是 $('#myform').submit();。
还是没有提交
它是否通过了条件，你看到 OK 警报了吗？请注意，success 中不再存在该事件，请从中删除行 event.preventDefault();。
【参考方案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>【讨论】：
一个快速的，每当我添加 method=POST 然后它不会提交 您能否提及您在浏览器控制台中是否收到任何错误？以上是关于使用 preventDefault 功能后有没有办法提交这个表单？的主要内容，如果未能解决你的问题，请参考以下文章
滑动时报错[Intervention] Unable to preventDefault inside passive event listener due to target being treat
引导验证（成功）后，表单使用默认方法而不是 ajax 提交。 e.preventDefault() 不起作用？