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

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

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.

Advertisement

Answer