在jQueryUI对话框中包含表单部分

Question

我有如下代码：

<form id="MyForm" name="MyForm" method="post" action="index.php">

<input type="text" id="Input1" name="Input1">
<input type="text" id="Input2" name="Input2">

<div id="dialog">
<input type="text" id="Input3" name="Input3">
<input type="text" id="Input4" name="Input4">
</div>

<button type="button" onclick="$('#dialog').dialog('open');">Fill out 3 and 4</button>
<input type="submit" value="Submit">

</form>

我可以将表单的第二部分放在JQueryUI对话框框中，但是Input3和Input4不会出现在POST数据中。这种情况是否可能？

- Brian

Answer 1

已编辑以不指定输入名称。

$('#dialog').bind('dialogclose', function(event, ui) {
    $('#dialog :input').each(function(index) {

      $("#myForm").add('<input>').attr({
        type: 'hidden',
        id: $(this).attr('id')
      });
    });
});

- macca1

---

我的例子非常简化，实际上我在两个表单中都有很多东西，包括文件。有没有一种方法可以不列出每个输入来完成这个任务？ - Brian

好的，我进行了更新，采用了更通用的方法，因此不会列出每个输入。这是伪代码（也许准确），没有完全测试过，但这个想法应该可行。 - macca1

Answer 2

关闭对话框后，只需销毁对话框并将其所有内容移回即可。就像这样：

  $("#trigger_link").click(function(event) {
    // Dialog creation
    $("div#form_part").dialog({autoOpen: false, buttons: {"OK": function() {$(this).dialog("close");}}});
    $("div#form_part").bind(
      'dialogclose', 
      function(event) {
        $(this).dialog("destroy");
        $(this).appendTo("#form").hide();
      }
    );
    // Displaying
    $("#div#form_part").dialog('open');
    event.preventDefault();
    return false;
  });

- temochka

Answer 3

您遇到的问题是，当您在DIV上调用对话框时，该DIV从DOM中分离，并重新附加到文档末尾（然后在表单之外）。

如果您真的想让jQuery对话框处理此问题，也许您可以尝试将对话框从DOM中删除，并将其放回表单中。

所有这些都未经过测试：

<form id="MyForm" name="MyForm" method="post" action="index.php">

<input type="text" id="Input1" name="Input1">
<input type="text" id="Input2" name="Input2">

<div id="hereismydialog">
<div id="dialog">
<input type="text" id="Input3" name="Input3">
<input type="text" id="Input4" name="Input4">
</div>
</div>


<button type="button" onclick="$('#dialog').dialog('open');">Fill out 3 and 4</button>
<input type="submit" value="Submit">

</form>

当文档准备好后，你需要执行以下操作：

// prepares the dialog, that will remove it from its location in the document and
// put it at the end
$('#dialog').dialog({ autoOpen: false });

// put it back where it was
$('#dialog').parent().detach().appendTo('#hereismydialog');

需要再次强调，以下所有方法都未经过测试，请在使用时确保已准备好 Firebug/Firequery 等工具。

- David V.

Answer 4

Brian， 你考虑过使用隐藏的输入字段，然后在对话框完成时只更新隐藏字段吗？这样可以避免进行任何烦人的DOM操作。

- Seaux

Answer 5

如果隐藏输入字段不是一个选项，那么在对话框的表单中添加事件处理程序（即真实输入字段的副本），以设置真实表单的值，怎么样？

如果您不想这样做，因为您不希望原始表单被杂乱无章地放置在对话框中，您可以将这些输入字段从屏幕上拖出来（即将其定位到最左边，类似于图像替换）或将它们设置为display:none（如果这不会阻止浏览器提交它们的值）。当然，您也可以使用hidden输入字段来处理微不足道的输入字段（文件上传无法通过这种方式伪造）。

jQueryUI对话框的问题在于它们被从DOM中删除，因此除非整个表单都包含在其中，否则您不能依赖它们的输入。不过，您可以使它们的输入行为像代理。

- Alan Plum

Answer 6

这可能有点丑陋，但你可以将非对话框控件包含在一个单独的 div 中，拦截提交并使用 .each() 方法遍历非对话框选择器，将它们附加到即将发送的 POST 请求中...

- penderi