[英]How to make a Confirm Dialog Appear before Form Post Request in EJS template
我正在嘗試使用以下內容創建一個確認對話框: 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() function 放置不正確,甚至沒有必要,但我不確定是否還有其他方法可以做到這一點。 當我單擊創建用戶按鈕時,應呈現確認對話框並詢問我是否確定要創建用戶。 如果我 select 是的,它應該提交表單但是如果我點擊取消,它不應該做表單發布請求
您可以使用 JavaScript submit()
function 根據響應遠程提交您的表單。 這意味着您必須使用普通按鈕,而不是使用提交按鈕。
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
,以防止function運行后頁面刷新。
我很驚訝您的文本編輯器沒有抱怨 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') } }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.