裏面有一個jQuery對話框的表單不提交

我有一個小窗體，其中包含一個jQuery UI對話框，用於在檢查特定複選框時詢問附加信息。該對話框打開幷包含2個額外的複選框。裏面有一個jQuery對話框的表單不提交

問題是，當表單被提交時，對話框中的2個複選框沒有與表單的其餘部分一起提交。從jQuery渲染對話框時我可以看出，它實際上是將它渲染到結束窗體標記之外，導致複選框不再是窗體的一部分。

我已經試過了諸如：

$("#dialog-form").parent().appendTo($("#ContactSpeakerForm:first"));

但還沒有拿出一個很好的解決方案。

這裏是我的JS：

$(function() { 

    var eventReg = $('#dialog-form').dialog({ 
     autoOpen: false, 
     modal: true, 
     buttons: { 
      Ok: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $('#Confirmed').click(function() { 
     if($('#Confirmed').attr('checked')) { 
      eventReg.dialog("open"); 
     } 
    }); 
});

下面是HTML：

<form id="ContactSpeakerForm" name="ContactSpeakerForm" action="/contacts/add-contact-speaker/id/3420" method="post"> 

    <input type="hidden" name="ID" value="" id="ID"> 
    <input type="hidden" name="Contact_ID" value="3420" id="Contact_ID">  

    <div class="page_panel_table"> 
    <table> 
     <tbody> 
      <tr> 
       <td align="right" class="form_label">Confirmed:</td> 
       <td> 
        <input type="checkbox" name="Confirmed" id="Confirmed" value="1"> 
       </td> 
      </tr> 
      <tr> 
       <td><input type="submit" name="submit" id="submit" value="Save"></td> 
      </tr> 
     </tbody> 
    </table>   
    </div> 

    <div id="dialog-form" style="display:none;" title="Speaker Event Registration"> 
     <input type="checkbox" name="RegisterForEvent" id="RegisterForEvent" value="1"> 
     <input type="checkbox" name="RegisterForDinner" id="RegisterForDinner" value="1"> 
    </div> 
</form>

任何人都知道一個好的解決方案？

來源

2012-03-26 Michael Irey

關鍵的問題是，一個對話框被附加到身體，使其更容易管理定位...所以它從您的表格中刪除 – charlietfl 2012-03-26 19:00:46

@charlietfl：是這是問題。 – 2012-03-26 19:12:20

設置你的對話後，使用：

eventReg.closest('div.ui-dialog').appendTo('#ContactSpeakerForm');

這裏有兩個關鍵的東西。首先，在小部件有機會初始化並更改標記後執行此操作。其次，你消除了對直接父母/子女關係的依賴。

來源

2012-03-26 18:57:27 tvanfosson

謝謝你的作品！但仍有不良副作用。我設置了默認情況下要檢查的對話框中的一個複選框，並且如果對話從不打開，則值不會在表單中提交。有任何想法嗎？ – 2012-03-26 19:11:25

@MichaelIrey他們應該總是被提交，如果他們被檢查。如果他們沒有被檢查，他們將不會被提交。我沒有看到你在默認情況下設置了哪一個，所以如果對話框沒有打開，那麼也不會提交。 – tvanfosson 2012-03-26 19:20:58

@MichaelIrey - 看到這個http://jsfiddle.net/bezj8/2/ – tvanfosson 2012-03-26 19:32:32

我知道這是一個老問題，但任何人誰具有相同的問題，有一個新的和簡單的解決方案：一個「appendTo」選項中的jQuery UI的1.10.0

http://api.jqueryui.com/dialog/#option-appendTo

被引入

$("#dialog").dialog({ 
    appendTo: "#ContactSpeakerForm" 
    .... 
});

來源

2013-12-14 22:52:58

裏面有一個jQuery對話框的表單不提交

回答

相關問題