Javascript 如何在EJS模板中的表单Post请求之前显示确认对话框
我正试图在EJS表单中创建一个类似这样的确认对话框:Javascript 如何在EJS模板中的表单Post请求之前显示确认对话框,javascript,html,node.js,forms,ejs,Javascript,Html,Node.js,Forms,Ejs,我正试图在EJS表单中创建一个类似这样的确认对话框:confirm('you sure?'),但我不知道在哪里以及如何让它正常工作 以下是迄今为止我的EJS模板的代码: <div id="popupAddUser" class="addUser"> <div class="card h-100"> <div class="row">
confirm('you sure?')
,但我不知道在哪里以及如何让它正常工作
以下是迄今为止我的EJS模板的代码:
<div id="popupAddUser" class="addUser">
<div class="card h-100">
<div class="row">
<div class="col-7"><h2>Create New User</h2></div>
</div>
<div class="card-body">
<form method="POST" id="formAddUser" action="/add-user" enctype="multipart/form-data">
<div class="container">
<div class="row">
<div class="col-xl-5 float-right">
<div class="form-group">
<input class="form-control" type="text" placeholder="Type a User name"
name="create_user">
</div>
<div>
<button type="submit" class="btn btn-primary float-right" form="formAddUser" onclick="checker()">Create
User
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
function checker(){
if( confirm("Are you sure you want to create a new User in the database?")){
continue;
}else{
break;
}
}
</script>
创建新用户
创造
使用者
函数检查器(){
如果(确认(“您确定要在数据库中创建新用户吗?”){
继续;
}否则{
打破
}
}
我知道checker()函数的位置不正确,甚至没有必要,但我不确定是否有其他方法可以做到这一点。当我单击“创建用户”按钮时,确认对话框将呈现并询问我是否确实要创建用户。如果我选择yes,它应该提交表单,但如果我单击cancel,它不应该执行表单post请求您可以使用JavaScript
submit()
函数根据响应远程提交表单。这意味着,您必须使用普通按钮,而不是使用提交按钮
函数检查器(){
如果(窗口确认(“您确定”)){
document.getElementById(“FormadUser”).submit();
}否则{
返回;
}
}
创建新用户
创造
使用者
我很惊讶您的文本编辑器没有抱怨if-else语句中的continue和break语句!!
我想:
- 删除内联onclick事件处理程序
- 改为使用addEventListener()方法或对表单元素的onsubmit调用
- 单击“取消”按钮时,使用event.preventDefault()方法停止表单提交
document.getElementById('form').addEventListener( 'submit', (e) => checker(e) ) function checker(e) { if(!confirm('Are you sure?')) { e.preventDefault() alert('Form was not submitted') }else { alert('New user created') } }