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()也是{good}。无论用户是单击“确定”还是“取消”，这两个都将停止提交表单。

您需要更改逻辑，以便在按钮单击（或任何其他事件）上显示模态确认，而不是在表单提交上。然后，如果用户单击“确定”，则可以调用表单“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');
    }       
});

Jquery模式对话框和表单提交

2 个答案: