Question

我有一个表格，我想在点击提交按钮后显示确认按摩，我也不想使用以下方法

return confirm("Are You Sure?")

我使用JQuery Confirm如下。

@using (@Html.BeginForm("SubmitTest", "HydrostaticReception", FormMethod.Post, new {id="ReceptionForm", onsubmit = "ValidateMyform(this);" }))
    {
    .....
    <button onclick="SubmitMyForm()">Submit</button>
    }

javascript代码是......

function ValidateMyform(form) {
        // get all the inputs within the submitted form
        var inputs = form.getElementsByTagName('input');
        for (var i = 0; i < inputs.length; i++) {
            // only validate the inputs that have the required attribute
            if (inputs[i].hasAttribute("required")) {
                if (inputs[i].value == "") {
                    // found an empty field that is required
                    alert("Fill all fields");
                    return false;
                }
            }
        }
        return true;
}

显示确认框（根据JQuery Confirm）的Javascript代码是

function SubmitMyForm() {
        $.confirm({
            title: 'Confirm!',
            content: 'Are you sure?',
            buttons: {
                No: function () {
                    return true;
                },
                Yes: function () {
                    $("#ReceptionForm").submit();
                    //alert("For Test");
                    //document.getElementById("ReceptionForm").submit();
                }
            }
        });
}

问题是......

当我点击提交按钮时，它不等我在确认框中点击是按钮，表格将提交（确认框出现，1秒后消失，表格提交）。

但是当我使用警告（“For Test”）; 而不是 $（“＃ReceptionForm”）。submit（）; 时，它可以正常工作。有人知道我为什么会遇到这个问题吗？!!!

Answer 1

您可以使用＆＃34;标记＆＃34;要知道确认是否发生了"prevent default"提交行为。

删除内联onsubmit = "ValidateMyform(this);"并改为使用jQuery事件处理程序。

var confirmed = false;
$("#ReceptionForm").on("submit", function(e){

  // if confirm == true here
  // And if the form is valid...

  // the event won't be prevented and the confirm won't show.
  if(!confirmed && ValidateMyform($(this)[0]) ){
    e.preventDefault();

    $.confirm({
      title: 'Confirm!',
      content: 'Are you sure?',
      buttons: {
        No: function () {
          return;
        },
        Yes: function () {
          confirmed = true;
          $("#ReceptionForm").submit();
        }
      }
    });
  }
});

如何在使用jquery确认提交表单之前显示确认框？

1 个答案: