我正在使用传统的提交按钮而不是 ajax 提交表单。(某些框架依赖项不允许这样做)
我想在用户提交表单之前使用确认框。
<!DOCTYPE html>
<html>
<head>
<!-- <link type="text/css" src="http://localhost/maverick/craftpip/dist/jquery-confirm.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/maverick/craftpip/dist/jquery-confirm.min.js"></script> -->
<!-- CSS dependencies -->
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<!-- bootbox code -->
<script src="http://localhost/maverick/bootbox-master/bootbox.js"></script>
<script type="text/javascript">
$(document).on('submit', $('#form1'), function(){
alert("works!!!");
bootbox.alert("Hello world!", function() {
console.log("Alert Callback");
return false;
});
});
</script>
</head>
<body>
<form name="test" action="" type="" id="form1">
<input type="text" name="message" />
<input type="submit" name="Enter" value="Enter" id="mySubmit" />
</form>
</body>
默认的确认和警告框可以工作，但是作为它的包装器的引导框会失败，并且在没有确认的情况下提交表单。 如何使用包装器覆盖默认行为？
最佳答案
要在确认/提醒后提交，添加一些变量作为确认状态。
var confirmed=false;//our state of alert/confirm
$(document).on('submit', '#form1', function(e){
if (!confirmed)
e.preventDefault();//if not confirmed submit is blocked
bootbox.alert("Hello world!", function() {
//ok we confirmed/alert was shown
confirmed=true;//set state on true
//run again
$('#form1').submit(); //trigger form again
});
});
因此，在第一次提交时，我们通过 e.preventDefault 停止提交并显示警报，在警报 - confirmed 设置为 true 并触发下一次提交后 -然后将提交表单，因为 confirmed 为真且 e.preventDefault 未被调用。
关于javascript - 覆盖默认警报和确认框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39118784/