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

Question

I'm trying to create a confirmation dialog using something like this: confirm('Are you sure?') inside of my EJS form but I don't know where and how to get it to work correctly.

Here is the code I have so far for my EJS template:

<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>

I'm aware that the checker() function isn't correctly placed or even necessary but I'm not sure if there's another way to do this. When I click the create user button, the Confirm dialog box should render and ask me if I'm sure I want to create a user. If I select yes, it should submit the form but if I click cancel, it shouldn't do the form post request

Answer 1

You can use the JavaScript submit() function to remotely submit your form depending on the response. This would mean that instead of using a submit button, you'd have to use a normal button.

 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>

Note that the button type is set to button rather than submit to prevent the page from refreshing after the function runs.

Answer 2

I am surprised your text editor did not complain about the continue and break statement in your if-else statement:! I would:

• Remove the inline onclick event handler

• Use instead the addEventListener() method or the onsubmit call on the form element.

• Use event.preventDefault() method to stop the form from submitting when the cancel button is clicked.

   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') } }