Javascript Alertify自动确认并提交表单，无需单击“确定”

我正在用bootstrap创建一个博客，我有一个表格可以提交类别：

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

我还尝试

event.preventDefault（）：

但效果并不好。需要帮忙吗。。。谢谢。
请尝试以下代码：

您需要从
按钮中删除
type=“submit”
。否则，它将默认提交表单

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>

//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;
        }
    });
});

试试这样的。我认为您需要在提交表单之前进行确认，因此添加了确认消息部分。希望这会有帮助

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

alertify在confirm函数中基本上取4个参数

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

如果（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
  });

  });

好的，这是很久以前发布和回复的。但是当我在开发asp.net时
core在2020年，我遇到了AlertifyJS。我喜欢图书馆。解决办法
问题是:
1） 我曾经
2） 我使用了e.preventdefault（）
3） 我使用了（“#类别表”）.submit（）
4） 确保在表单中添加id='category-form'，以及按钮的id。
5） 使用按钮，而不是输入类型=提交。
它们的工作方式可能会有所不同。
区别在于可以有内容,，
而不能（它是空元素）。
$（“#btn提交”）。在（'click'，函数（e）{
e、 预防默认值（）；
alertify.confirm（‘保存类别’、‘是否继续？’）函数（e）
{
如果（e）{
$（“#类别表”）.submit（）；
alertify.success（'类别保存成功'）；
返回true；
}
否则{
错误（“类别未保存”）；
返回false；
}                   
}，函数（）{alertify.error（'Cancel'）}）；
});
感谢@vijayP的快速回复，是的，第一部分是避免提交，但由于某些原因，当返回false时，表单没有保存数据。我有点困惑。哦……没错。将在一段时间内更新答案。感谢您的帮助，我尝试了您的代码但不起作用，显然表单提交但没有数据，我使用AJAX和PHP保存数据但也不起作用，我感谢您的帮助@vijayPI start thinking是Alertify JS插件的问题。我可能会使用JavaScript nature confirm dialog=DThank you for the response@vitally，我尝试了你的代码，显然效果很好，confirm dialog中唯一的问题是没有执行Alertify JS插件，但感谢你的回答，如果你有其他解决方案，我们非常欢迎。=）尽量避免警惕。使用默认警报框，或者如果您使用的是引导框架，请尝试使用模式框。谢谢@vitally，我认为这是最好的选择另一个选项一个有趣的选项特别是在ASP net core Razor页面中不触发页面隐藏方法的选项是如下代码：$（'#btn submit'）。on（'click'，function（）{if（confirm（“您想继续吗？”）{alert（'谢谢您的确认'）；返回true；}否则{alert（'您为什么按取消？您应该已确认'）；返回false；}）；
$("#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
  });

  });

     Ok, This was posted and answered a long time ago. But as I was developing asp net 
    core in 2020, I came across AlertifyJS. I like the library. A solution for this 
    issue is:
    1) I used <button>
    2) I used e.preventdefault()
    3) I used ('#category-form').submit() 
    4) Make sure you add id='category-form' in your form and also and id for button. 
    5) Use button and not input type=submit. 
     There could be a difference in how they work. 
     The difference is that <button> can have content, 
     whereas <input> cannot (it is a null element).

        $('#btn-submit').on('click', function (e) {
            e.preventDefault();
            alertify.confirm('Save Category', 'Do you want to proceed?', function (e) 
            {
                if (e) {
                    $("#category-form").submit();
                    alertify.success('Category Saved Successfully.');
                    return true;
                }
                else {
                    alertify.error("Category was not saved.");
                    return false;
                }                   
            }, function () { alertify.error('Cancel') });
        });