如何使确认对话框出现在 EJS 模板中的表单 Post 请求之前

Question

我正在尝试使用类似这样的东西创建一个确认对话框：confirm('Are you sure?') 在我的 EJS 表单中，但我不知道在哪里以及如何让它正常工作。

这是我目前的 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() 函数没有正确放置，甚至没有必要，但我不确定是否有其他方法可以做到这一点。当我单击创建用户按钮时，应呈现确认对话框并询问我是否确定要创建用户。如果我 select 是，它应该提交表单，但如果我单击取消，它不应该执行表单 post 请求

Answer 1

您可以使用 JavaScript submit() 功能根据响应远程提交表单。这意味着您必须使用普通按钮，而不是使用提交按钮。

function checker(){
  if(window.confirm("Are you sure")){
    document.getElementById("formAddUser").submit();
  } else {
    return;
  }
}

<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="button" class="btn btn-primary float-right" form="formAddUser" onclick="checker()">Create
                                    User
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

注意按钮类型设置为button而不是submit以防止函数运行后页面刷新。

Answer 2

我很惊讶你的文本编辑器没有抱怨你的 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')
 }
}

如何使确认对话框出现在 EJS 模板中的表单 Post 请求之前

How to make a Confirm Dialog Appear before Form Post Request in EJS template

html

javascript

forms

ejs

node.js