Блог

Главная - Вопросы по программированию - Как сделать так, чтобы Диалоговое окно подтверждения появлялось перед запросом на публикацию формы в шаблоне EJS

Как сделать так, чтобы Диалоговое окно подтверждения появлялось перед запросом на публикацию формы в шаблоне EJS

#javascript #html #node.js #forms #ejs

Вопрос:

Я пытаюсь создать диалоговое окно подтверждения, используя что-то вроде этого: 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() расположена неправильно или даже необходима, но я не уверен, что есть другой способ сделать это. Когда я нажимаю кнопку Создать пользователя, должно появиться диалоговое окно подтверждения и спросить меня, уверен ли я, что хочу создать пользователя. Если я выберу «Да», он должен отправить форму, но если я нажму «Отмена», он не должен отправлять запрос на публикацию формы

Ответ №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 для предотвращения обновления страницы после запуска функции.

Комментарии:

1. Спасибо, ты спасаешь мне жизнь 🙂 Я понятия не имел, что мне нужно было установить тип кнопки на кнопку, а не отправлять

Ответ №2:

Я удивлен, что ваш текстовый редактор не жаловался на оператор continue и break в вашем заявлении if-else!! Я бы:

  • Удалите встроенный обработчик событий 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')
 }
}
Метки: ,