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

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

有没有人遇到过simmilar问题？

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

Answer 1

我刚遇到同样的问题.我通过添加另一个来解决它

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

在表单的最后(但内部),然后你必须将其添加到jQuery:

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

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

干杯!