2

我正在使用引导程序创建一个博客，并且我有一个提交类别的表单：

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

但也不起作用。请提供任何帮助...谢谢。

4

4 回答 4

1

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

$("#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.
                }
        });
于 2015-12-02T05:27:45.673 回答
0

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

  });
于 2016-11-25T12:09:45.543 回答
0

您能否尝试以下代码：

您需要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;
        }
    });
});
于 2015-12-02T04:24:40.120 回答
0 
     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') });
        });
于 2020-08-21T15:34:32.917 回答