如何在EJS模板中的表單Post請求之前顯示確認對話框

我正在嘗試創建一個確認對話框,使用類似于這樣的東西: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()函數的位置不正確,甚至是不必要的,但我不確定是否有其他方法可以做到這一點。當我單擊“創建用戶”按鈕時,確認對話框將呈現并詢問我是否確定要創建用戶。如果我選擇yes,它應該提交表單,但是如果我單擊cancel,它不應該提交表單post請求

? 最佳回答:

您可以使用JavaScriptsubmit()函數根據響應遠程提交表單。這意味著你不用提交按鈕,而要用普通按鈕。

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,以防止在函數運行后刷新頁面。

主站蜘蛛池模板: 国产福利91精品一区二区| 中文字幕一区二区三区永久| 久久亚洲国产精品一区二区| 国产精品无码一区二区在线 | 在线观看国产一区| 精品少妇人妻AV一区二区| 精品一区二区三区无码免费视频| 一区国严二区亚洲三区| 国产在线无码视频一区| 亚洲色精品VR一区区三区| 在线播放国产一区二区三区 | 国产一区二区三区免费视频| 国产精品第一区揄拍| 久久无码人妻一区二区三区 | AA区一区二区三无码精片| 国产精品熟女一区二区| 亚洲日本一区二区三区在线| 亚洲成av人片一区二区三区| 精品视频一区在线观看| 国产一区二区三区精品久久呦| 国产微拍精品一区二区| 日韩一区二区三区射精| 国产精品久久久久一区二区三区 | 日本精品一区二区三区四区| 午夜DV内射一区区| 波多野结衣一区二区三区88| 国产一区二区三区在线看片| 国产一区二区三区视频在线观看| 免费在线视频一区| 狠狠做深爱婷婷综合一区| 中文字幕一区二区在线播放| 国产精华液一区二区区别大吗 | 一区二区免费在线观看| 国产福利电影一区二区三区,日韩伦理电影在线福| 日本一区高清视频| 国产一区二区三区在线观看精品| 国产在线无码视频一区二区三区 | 无码人妻精品一区二区蜜桃| 日本精品3d动漫一区二区| 亚洲中文字幕丝袜制服一区| 国模少妇一区二区三区|