Alertify confirms and submits a form automatically without clicking OK.

[luissalamank]

I'm creating a blog with bootstrap and I have a form to submit categories:

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

When I press the form button "Add Category" the dialog appears but after a few seconds it submits itself immediately and the dialog disappears without clicking the buttons "yes" or "no", searching the web I found some solutions but doesn't work for me. The code I use for Alertify JS is the following:

$("#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.");
        }
    });
});

I also try 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;
        }
    });
});

But does not work as well. Any help please... Thank you.

[DeWetdeJager]

Have you tried the following:

Change the button's type to "button". Then in your code:

if (e) {
$("#category-form").submit();
alertify.success("Category was saved.")
form.submit();
} else {

    }