Alertify подтверждает и автоматически отправляет форму без нажатия кнопки OK

Question

Я создаю блог с начальной загрузкой и у меня есть форма для представления категории:

<form action="categories.php" id="category-form" class="form-horizontal" role="form" method="post"> 
    <div class="form-group"> 
    <label for="category" class="col-sm-2 control-label">Category</label> 
    <div class="col-sm-10"> 
     <input type="text" name="category" class="form-control" id="category" placeholder="Category"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <input type="submit" name="submit" id="btn-submit" class="btn btn-primary" value="Add Category"> 
    </div> 
    </div> 
</form> 

При нажатии кнопки формы «Добавить категории» появляется диалоговое окно но через несколько секунд он отправляется немедленно, и диалог исчезает, не нажимая кнопки «да» или «нет», ища в Интернете я нашел некоторые решения, но не работает для меня. Код я использую для Alertify JS является следующее:

$("#btn-submit").on("click", function(){ 
    alertify.confirm("This is an alert dialog?", function(e){ 
     if (e) { 
      alertify.success("Category was saved.") 
     } else { 
      alertify.error("Category not saved."); 
     } 
    }); 
return false; 
}); 

Я также пытаюсь event.preventDefault();:

$("#btn-submit").on("click", function(event){ 
    event.preventDefault(); 
    alertify.confirm("This is an alert dialog?", function(e){ 
     if (e) { 
      $("#category-form").submit(); 
      alertify.success("Category was saved.") 
      return true; 
     } else { 
      alertify.error("Category not saved."); 
      return false; 
     } 
    }); 
}); 

Но не работает, как хорошо. Любая помощь, пожалуйста ... Спасибо.

Answer 1

Не могли бы вы, пожалуйста, попробуйте следующий код:

Вы должны удалить type="submit" из вашего button. В противном случае он отправляет форму по умолчанию.

HTML:

<form action="categories.php" id="category-form" class="form-horizontal" role="form" method="post"> 
    <div class="form-group"> 
    <label for="category" class="col-sm-2 control-label">Category</label> 
    <div class="col-sm-10"> 
     <input type="text" name="category" class="form-control" id="category" placeholder="Category"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <input type="button" id="btn-submit" class="btn btn-primary" value="Add Category"> 
    </div> 
    </div> 
</form> 

JQuery Код:

//your button click code 
$("#btn-submit").on("click", function(event){ 
    event.preventDefault(); 
    alertify.confirm("This is an alert dialog?", function(e){ 
     if (e) { 
      $("#category-form").submit(); 
      alertify.success("Category was saved.") 
      return true; 
     } else { 
      alertify.error("Category not saved."); 
      return false; 
     } 
    }); 
}); 

Answer 2

попробовать что-то вроде этого. я думаю, что вы хотите получить подтверждение перед отправкой формы, поэтому добавили часть сообщения подтверждения. надеюсь, это поможет.

$("#category-form").submit(function (e) { 
      var result = confirm("Are you sure ?"); 
      if(result){ 
       // do something 
      } else { 
       alertify.error("Error mesage."); 
       e.preventDefault(); // this will prevent from submitting the form. 
       } 
     }); 

Answer 3

alertify в основном принимают 4 аргумента в функции подтверждающим

alertify.confirm(title, message, onconfirm, oncancel); 

Вы не должны делать if(e) этот код

$("#formID").on("click", function(){ 
    alertify.confirm("This is an alert dialog?", function(e){ 
     if (e) { 
      alertify.success("Category was saved.") 
     } else { 
      alertify.error("Category not saved."); 
     } 
    }); 
return false; 
}); 

теперь станет

$("#formID").submit(function(e){ 
    e.preventDefault(); 
alertify.confirm('Confirm Title', 'Confirm Message', function(){ 
    // call the function that will handle your form submission may be ajax don't write $('#fomr').submit() becasue it will start an endless loop through this function 
    }, function(){ 
    // when user click cancel 
    }); 

    });