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

【问题标题】：Include part of form in jQueryUI dialog box在 jQueryUI 对话框中包含部分表单
【发布时间】：2010-02-26 05:29:58
【问题描述】：

我的代码如下所示：

<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 数据中。可以这样做吗？

【问题讨论】：

标签： jquery forms jquery-ui

【解决方案1】：

编辑为不指定输入名称。

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

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

【讨论】：

我的例子非常简单，实际上我在两种表单上都有很多东西，包括文件。有没有办法在不列出每个输入的情况下做到这一点？
好的，我使用更通用的方法对其进行了更新，因此它不会列出每个输入。这是伪代码（也可能是准确的）——没有对其进行精确测试，但这个想法应该可行。

【解决方案2】：

您遇到的问题是，当您在 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 上尝试一下。

【讨论】：

【解决方案3】：

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

  $("#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;
  });

【讨论】：

【解决方案4】：

布赖恩，您是否考虑过使用隐藏输入字段，然后在对话框完成后更新隐藏字段？这将使您不必进行任何烦人的 DOM 操作。

【讨论】：

【解决方案5】：

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

如果您不想这样做，因为您不希望原始表单被对话框中的内容弄乱，您可以将这些输入拉出屏幕（即，将其放在最左边, ala 图像替换）或将它们设置为display:none（如果这不会阻止浏览器提交它们的值）。当然，您也可以将hidden 输入用于琐碎的输入字段（不能像那样伪造文件上传）。

jQueryUI 对话框的问题在于它们会脱离 DOM，因此除非整个表单都包含在其中，否则您不能依赖它们的输入。不过，您可以让他们的输入表现得像代理一样。

【讨论】：

【解决方案6】：

这有点难看，但您可以将非对话框控件包含在单独的 div 中，拦截提交并将它们附加，使用 .each() 圆形非对话框选择器，到传出的 POST...

【讨论】：