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

我的代码如下所示:

我可以将表单的第二部分放在JQueryUI对话框中,Input3和Input4不会出现在POST数据中。 是否有可能做到这一点?

编辑为不指定输入名称。

 $('#dialog').bind('dialogclose', function(event, ui) { $('#dialog :input').each(function(index) { $("#myForm").add('').attr({ type: 'hidden', id: $(this).attr('id') }); }); }); 

您遇到的问题是,当您在DIV上调用对话框时,DIV将与DOM分离并重新附加到文档的末尾(然后在表单之外)

如果你真的想要一个jQuery对话框来处理这个问题,也许你可以尝试从DOM中删除对话框并将其放回到表单中。

所有这些都是未经测试的:

 

文档准备好后,您可以:

 // 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。

只需破坏对话框并在关闭后将其所有内容移回。 像这样:

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

Brian,您是否考虑过使用隐藏的输入字段,然后在对话框完成后更新隐藏的字段? 这将使您免于进行任何恼人的DOM操作。

如果隐藏的输入字段不是一个选项,那么将事件处理程序添加到对话框的表单(即实际输入的重复项)来设置真实表单的值呢?

如果您不想这样做是因为您不希望原始表单与对话框中的内容混杂在一起,您可以将这些输入从屏幕中拉出(即将其放置在最左侧,ala图像替换)或将它们设置为display:none (如果这不会阻止浏览器提交它们的值)。 当然,你也可以使用hidden输入来处理琐碎的输入字段(文件上传不能像这样伪造)。

jQueryUI对话框的问题在于它们被淘汰出局,所以除非整个表单都包含在内,否则你不能依赖它们的输入。 但是,您可以使其输入行为类似于代理。

这有点难看,但你可以在一个单独的div中包含非对话框控件,截取提交并使用.each()循环非对话框选择器将它们附加到传出的POST …