使用 jQuery UI 对话框提交绑定表单答案

【问题标题】：Submitting a Bound Form With jQuery UI Dialog使用 jQuery UI 对话框提交绑定表单
【发布时间】：2013-12-13 19:15:01
【问题描述】：

我在我们项目的其他地方也有类似的代码，但我似乎无法让它在本节中以同样的方式工作。应该发生的是当单击表单提交按钮时，表单被绑定，直到我指定取消绑定它并打开一个对话框窗口。当用户单击“是”或“否”时，表单应该取消绑定并提交，但提交部分似乎无法正常工作。

我相当确定解除绑定正在工作，因为我可以按是或否，然后窗口将关闭。然后我可以再次按下提交按钮并成功提交表单。本节代码如下：

$("#injuryStatusForm").bind('submit', function(e) {
   e.preventDefault();
   $("#sendEmailsConfirm").dialog('open');
});
$("#sendEmailsConfirm").dialog({
   autoOpen: false,
   resizable: false,
   width:500,
   modal: true,
   buttons: {
      "Yes, Send Emails": function() {
         $(this).dialog("close");
         $("#injuryStatusForm").append('<input type="hidden" name="emails" value="true" />');
         $("#injuryStatusForm").unbind("submit").submit();
      },
      "No, DON'T Send Emails": function() {
         $(this).dialog("close");
         $("#injuryStatusForm").unbind("submit").submit();
      },
      Cancel: function() {
         $(this).dialog("close");
      }
   }
});

这是页面上唯一的表单，因此不应该有任何冲突。另一部分的代码类似，因为它显示了一个创建帐户的表单。单击提交按钮时，会出现一个 jQuery 对话框，并且会发生相同的情况。该部分的代码如下：

$("#newAccountForm").bind('submit', function(e) {
  e.preventDefault();
  $("#parentConfirmation").dialog('open');
});
$("#parentConfirmation").dialog({
  closeOnEscape: false,
  open: function() { $(".ui-dialog-titlebar-close").hide(); },
  autoOpen: false,
  resizable: false,
  width:600,
  modal: true,
  buttons: {
     "No, I am not a Parent or Legal Guardian": function() {
        //window.location = "/login/";
        $(this).dialog("close");
        window.location = "#flash";
        $('#flash').html('<p class="error">*You must be a Parent or Legal Guardian to create an account.</p>');
     },
     "Yes, I am a Parent or Legal Guardian": function() {
        $(this).dialog("close");
        $('#newAccountForm').unbind('submit').submit();
     }
  }
});

我似乎无法找到为什么第一组代码（受伤状态代码）不起作用而新帐户代码起作用。有什么建议吗？

【问题讨论】：

你为什么要解绑提交事件？用户是否只获得一次确认对话框？
是和不是。如果用户单击是或否，它会显示一次。如果他们单击是或否，则提交表单并将数据保存到数据库中。如果用户单击取消或“x”按钮并且不提交表单，它只会关闭窗口。它保持在同一页面上。我在堆栈溢出的其他地方发现了这种方法，作为在提交表单之前允许 jQuery 对话框弹出窗口的一种方式。如果有更好的方法，我愿意看到它。
如果您单步执行按钮回调，$("#injuryStatusForm") 是否解析为正确的 <form> 元素？
在 chrome 的 javascript 控制台中，捕获到了其他代码中未捕获的以下错误：Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function。我完全不明白它在说什么？
感谢您的帮助。我尝试从提交按钮中删除 name 属性，它成功了。不知道为什么会引起大惊小怪，但它恰好是问题所在。

标签： jquery forms jquery-ui jquery-ui-dialog jquery-dialog

【解决方案1】：

问题实际上来自 HTML 正文中的输入类型提交元素。提交元素有一个名称属性并导致问题。删除 name 属性后，取消绑定对话框中的表单后的表单提交工作。

<input type="submit" id="submitStatusComment" name="submit" value="Save" />

到

<input type="submit" value="Save" />

（我也不需要 ID，因为它没有在页面上的任何地方使用）。

【讨论】：