Как предотвратить действие формы, когда onsubmit подтвердить возврат false? - PullRequest
Новая
       11

Как предотвратить действие формы, когда onsubmit подтвердить возврат false?

1 голос
/ 10 июня 2019

В моей HTML-форме я хочу отобразить поле confirm(), прежде чем пользователь перейдет на следующую страницу. Я использую jQuery AJAX с атрибутом onsubmit на form.

Проблема в том, что запрос AJAX запускается каждый раз, даже если я нажимаю кнопку отмены в диалоговом окне подтверждения. Как я могу остановить запрос AJAX, когда пользователь нажимает кнопку отмены в поле подтверждения? 

<form onsubmit="return confirm('Do You want to Continue?');" action="#" id="renewbyuser" method="POST">
  <input class="renew button dark-gray" type="submit" name="renewnow" value="Renew Now">
</form>

$(document).ready(function() {
  $("#renewbyuser").submit(function(e) {
    $.ajax({
      // ajax runs here
    });

    e.preventDefault(); // avoid to execute the actual submit of the form.
  });
});

Ответы [ 2 ]

1 голос
/ 10 июня 2019

Самый простой способ - не использовать форму для отправки данных в бэкэнд.Вам просто нужно использовать ajax для публикации данных и предотвращения таких действий:

HTML: 

<form>
  <button class="renew button dark-gray" id='btn-submit' name="renewnow" value="Renew Now">    
</form>

jQuery: 

$(document).ready(function() {
  $("#btn-submit").on('click',(e) =>{
    let check =confirm("do u want to continue!");
    if(check){
      $.ajax({
        type : 'post',
        url: 'formSubmitUrl'
        data : dataForm
      }).done((result)=>{});
    } 
  });
});

или использовать библиотеку jqueryForm дляты хочешь

1 голос
/ 10 июня 2019

Проблема заключается в том, что вы назначаете два отдельных обработчика событий, поэтому, хотя вы предотвращаете первое, основываясь на результате confirm(), событие submit, которое вы прослушиваете через jQuery, по-прежнему срабатывает.

Чтобы это исправить, поместите вызов confirm() в обработчик событий submit и удалите атрибут onsubmit из тега form в своем HTML: 

<form action="#" id="renewbyuser" method="POST">
  <input class="renew button dark-gray" type="submit" name="renewnow" value="Renew Now" />
</form>

$(document).ready(function() {
  $("#renewbyuser").submit(function(e) {
    e.preventDefault();

    if (!confirm('Do You want to Continue?'))
      return;

    $.ajax({
      // ajax runs here
    });
  });
});
...