Jquery 模态对话框和表单提交

Question

我有一个表单，我需要在保存前向用户显示确认对话框。

我通过截取表单提交函数来做到这一点，如下：

$("#my_form").submit(function(e) {
    if ($("#id").val() > 0) {
        var $dialog = $('<div></div>')
            .html('Are you sure?')
            .dialog({
                autoOpen: false,
                title: 'Save New Invoice',
                modal: true,
                buttons: {
                    "OK": function() {
                        $dialog.dialog('close');
                        $("#my_form").submit();
                    },
                    Cancel: function() {
                        $(this).dialog("close");            
                    }
                }
            });
        $dialog.dialog('open');
        e.preventDefault();
        return false;
    }       
});

但是，“确定”按钮无法正常工作 - 对话框未关闭且表单未提交。

如果我按如下方式更改 OK 功能，则关闭对话框并显示警报。

"OK": function() {
  $dialog.dialog('close');
  alert('form will be submitted');
},

所以，我猜这与$("#my_form").submit(); 方法有关。

Answer 1

这不是一次又一次地调用您的表单提交函数吗？我看到您正在附加该函数以提交功能，当您再次调用提交时，它正在调用相同的函数。

您的 $("#invoice_edit_form") 是其他表单。这就像要求一个表单提交其他表单一样吗？

Answer 2

您遇到的问题是您的提交处理程序总是返回false 并且有e.preventDefault() 也很好衡量。无论用户单击“确定”还是“取消”，这两种方法都会停止提交表单。

您需要更改逻辑，以便您的模式确认显示在按钮单击（或任何其他事件）上，而不是表单提交上。然后，如果用户点击确定，您可以调用表单的submit() 方法。

$("#submitButton").click(function(e) {
    if ($("#id").val() > 0) {
        var $dialog = $('<div></div>')
            .html('Are you sure?')
            .dialog({
                autoOpen: false,
                title: 'Save New Invoice',
                modal: true,
                buttons: {
                    "OK": function() {
                        $dialog.dialog('close');
                        $("#my_form").submit();
                    },
                    Cancel: function() {
                        $(this).dialog("close");            
                    }
                }
            });
        $dialog.dialog('open');
    }       
});