jQuery模態窗口移除我的表單中的元素

jQuery，當我使用它創建一個包含表單元素的模式窗口時，它會在我提交表單時取出這些元素。形式的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的exaple：

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

那麼通過螢火蟲的inspetion期間我nocited，是jQuery的實際消除內我的表單元素#add_photo並將它們放在DOM中的表單之外，所以即使在HTML中，模式對話框在我的表單中也是如此，在DOM中它不是......

這就是我遇到問題的原因！

有沒有人遇到類似的問題？

任何解決方案？！非常感謝你！

來源

2009-02-19 Sinisa Valentic

對不起，誤解了你的問題。我用jQuery UI對話框複製了你的問題，所以它可能有錯誤的代碼。您可能想要向jQuery團隊提交一份關於它的錯誤報告。 – Randy 2009-02-19 23:53:46

我剛剛有同樣的問題。我解決它通過在最後的形式加入另一

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

（但裏面的），然後你必須把它添加到jQuery的：

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

這將確保之前的形式提交你的對話框div將被放回到表單標籤之間。感謝arnorhs我來到這個解決方案。

乾杯！

來源

2009-02-20 14:26:47

窗體需要在div內。這就是所有對話框中的例子。不知道你如何做到這一點，標題和網址輸入不在對話框中。你不能把它們放在上面嗎？

這不會有問題：

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

來源

2009-02-19 23:55:13

我來到了一個點，我也需要這個替代ajax上傳，當然，即使當我使用它時，jquery也會移除表單標籤！ – 2009-02-26 19:06:32

但如果您的對話框只是表單提交的一部分 – leora 2010-01-16 12:56:25

我不知道什麼對話框插件，您正在使用，但我會懷疑對話框插件拉DIV表單的並將其放置到頁面的主體中，以便它可以將框放在頁面的前面，而不是在表單元素之外。

因此，爲了讓對話框插件讓您的對話框出現在您網頁上的所有內容前面，它需要將它從它所坐的任何元素中刪除，無論它是表單還是還要別的嗎。

來源

2009-02-20 00:02:14 arnorhs

This article介紹瞭如何解決你的問題：

你會看到，我們必須通過我們的網頁中途的內容已被標記了其他類，最重要的是，放置在底部結束標記之前的頁面。爲什麼這很重要？因爲這也意味着你放置在這個對話框中的任何ASP.Net控件也將出現在頁面底部，在頁面標籤之外。這意味着您將無法在回發中獲得處理。

解決方案是什麼？那麼，有兩種選擇：

移動的元素回的形式，並手動當您創建對話框提交按鈕被點擊時

克隆的元素，然後克隆值回來，觸發點擊原始按鈕（或者，如果您只有一個或兩個要回發的值，只需將值分配給ASP.Net隱藏字段控件）。

來源

2009-02-27 14:12:56