jQuery模态窗口从我的窗体中删除元素 [英] jQuery modal window removes elements from my form

问题描述

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

jQuery, when i use it to create a modal window which contains form elemets, it takes out those elements when i submit the form.

示例的形式：

<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的exaple：

exaple of JS:

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

所以我在通过firebug进行检查，是jQuery实际上删除了#add_photo中的表单元素，并将它们放在DOM中的表单之外，所以即使在html中，模态对话框也是我的形式，在DOM中它不是....

So what i nocited during the inspetion via firebug, is that jquery actually removes my form elements within #add_photo and puts them outside the form in DOM, so even tough in html the modal dialog is within my form, in DOM it isn't ....

这是我遇到问题的原因！

An this is the reason why i'm having the issue!

有没有人遇到过simmilar问题？

Have anyone encountered simmilar problem?

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

Any solution?! Thank you very much!

推荐答案

我只是有同样的问题。我通过添加另一个

I just had the same problem. I solved it by adding another

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

在窗体的最后（但内部），然后您必须将其添加到jQuery： / p>

at the end (but inside) of the form and then you have to add this to jQuery:

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

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

This will make sure that before the form is submit your dialog div will be put back in between the form tags. Thanks to arnorhs I came to this solution.

干杯！

这篇关于jQuery模态窗口从我的窗体中删除元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！