jQuery 模态窗口从我的表单中删除元素

Question

jQuery，当我使用它来创建一个包含表单元素的模式窗口时， 当我提交表单时，它会取出这些元素。

表格示例：

<form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post"> 

    <label for="article_title" class="required">Title:</label> 

    <input class="formfield" id="article_title" name="article_title" value="" type="text"> 

    <label for="url" class="required">Url:</label> 

    <input class="formfield" id="url" name="url" value="" type="text"> 

    <div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content"  title="Add Photo"> 
        <label for="photo_title" class="optional">Photo title:</label> 
        <input class="formfield" id="photo_title" name="photo_title" value="" type="text">
        <label for="photot" class="optional">Photo thumb:</label> 
        <input type="file" name="photot" id="photot" class="formfield">
        <label for="photo_checkbox" class="optional">Include lighbox?</label> 
        <input name="photo_checkbox" value="0" type="hidden"> 
        <input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox"> 
        <label for="photo_big" class="optional">Photo:</label> 
        <input type="file" name="photo_big" id="photo_big" class="formfield"> 
    </div>
</form>

JS 示例：

<script>
$(document).ready(function(){
    $("#add_photo").dialog({
        autoOpen: false,
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

所以我在通过 firebug 进行检查期间注意到的是，jquery 实际上删除了我在#add_photo 中的表单元素并将它们放在 DOM 中的表单之外，所以即使在 html 中很难模态对话框在我的表单中，在 DOM 中它是't ....

这就是我遇到问题的原因！

有没有人遇到过类似的问题？

有什么办法吗？！非常感谢！

Answer 1

我也遇到了同样的问题。我通过添加另一个解决了它

<div id="beforesubmit" style="display:none"></div> 

在表单的末尾（但在内部），然后您必须将其添加到 jQuery：

$("form").submit(function() {
    $("#add_photo").prependTo("#beforesubmit");
});

这将确保在提交表单之前，您的对话框 div 将被放回表单标签之间。感谢arnorhs，我找到了这个解决方案。

干杯！

Answer 2

我不确定您使用的是什么对话框插件，但我怀疑对话框插件将 DIV 从表单中拉出并将其放入页面正文中，因此它可以带框在页面前面，在表单元素之外。

所以换个说法，为了让对话框插件让你的对话框出现在页面上所有内容的前面，它需要从它所在的任何元素中删除它，无论它是一个表单还是任何东西否则。

Answer 3

表单需要在 div 中。这就是所有 Dialog 示例中的情况。如果标题和 url 输入不在对话框中，不确定您将如何做到这一点。你不能也把它们放在上面吗？

这不会有问题：

<div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content"  title="Add Photo"> 
  <form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post"> 
    <label for="article_title" class="required">Title:</label> 
    <input class="formfield" id="article_title" name="article_title" value="" type="text"> 

    <label for="url" class="required">Url:</label> 
    <input class="formfield" id="url" name="url" value="" type="text"> 

    <label for="photo_title" class="optional">Photo title:</label> 
    <input class="formfield" id="photo_title" name="photo_title" value="" type="text">
    <label for="photot" class="optional">Photo thumb:</label> 
    <input type="file" name="photot" id="photot" class="formfield">
    <label for="photo_checkbox" class="optional">Include lighbox?</label> 
    <input name="photo_checkbox" value="0" type="hidden"> 
    <input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox"> 
    <label for="photo_big" class="optional">Photo:</label> 
    <input type="file" name="photo_big" id="photo_big" class="formfield"> 
  </form>
</div>

Answer 4

This article 描述了如何解决您的问题：

您会看到，我们在页面中途的内容已经用其他类进行了标记，最重要的是，放置在页面底部紧挨着结束标记之前。为什么这很重要？因为这也意味着您放置在此对话框中的任何 ASP.Net 控件也将出现在页面底部，在页面标记之外。这意味着您将无法在回发时处理它们。

解决办法是什么？好吧，有两种选择：

1. 将元素移回表单，并在单击按钮时手动提交
2. 在创建对话框时克隆元素，然后将值克隆回来，触发单击原始按钮（或者，如果您只有一两个值要回传，只需将值分配给 ASP.Net 隐藏字段控制）。

Answer 5

来自http://blog.coreycoogan.com/2010/12/01/jquerys-dialog-and-form-problems/

通过 $("mydialog").parent().appendTo($("form:first")) 将其绑定到表单。

请注意，您必须在您已经拨打过$("mydialog").dialog() 之后再拨打此电话

Answer 6

正如this question 的答案中所见，jQuery 对话框有一个字段appendTo，可用于配置初始化时对话框（div-wise）的放置位置。

这似乎是解决问题的最少忍者解决方法。