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”）是一些其他的form.Is就像要求一个表单提交其他表单一样吗？

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