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中它不是那......

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

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

任何解决方案？！非常感谢你！

Answer 1

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

解决了这个问题

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

在表单的结尾（但在里面），然后你必须将它添加到jQuery：

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

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

干杯！

Answer 2

表单需要在div中。这就是所有Dialog示例中的情况。不确定如何使用不在对话框中的标题和网址输入来执行此操作。你能不能把它们放在上面吗？

这不会有问题：

<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 3

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

所以换句话说，为了让对话框插件让你的对话框显示在页面上的所有内容之前，它需要将它从它所在的任何元素中删除，无论它是一个表单还是其他任何内容其他

Answer 4

This article介绍了如何解决您的问题：

您会看到我们页面中间的内容已经标记了其他类，最重要的是，它们位于结束标记之前的页面底部。为什么这很重要？因为它还意味着您在此对话框中放置的任何ASP.Net控件也将显示在页面底部，页面标签之外。这意味着你将无法在回发时获得它们的句柄。

解决方案是什么？嗯，有两种选择：


将元素移回表单，并在单击按钮时手动提交

在创建对话框时克隆元素，然后克隆值，触发单击原始按钮（或者，如果您只有一个或两个值要回发，只需将值分配给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）放在哪里。

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

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

6 个答案: