2012-03-26 8 views
1

特定のチェックボックスがオンの場合に追加情報を求める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> 

誰もが良い解決策を知っていますか?

+0

重要な問題は、位置を管理しやすくするためにダイアログが本文に追加されるということです。フォームから削除されます。 – charlietfl

+0

@charlietfl:はいこれが問題です。 –

答えて

3

は、あなたのダイアログを設定した後、使用します。ここでは二つの重要なものがあります

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

。まず、ウィジェットがマークを初期化して変更する機会を得た後でこれを実行します。次に、直接の親子関係への依存を取り除きます。

+0

ありがとうございます!しかし、まだ悪い副作用があります。ダイアログボックスのチェックボックスの1つをデフォルトでチェックするように設定しています。ダイアログが開かれない場合は、フォームに値が入力されません。何か案は? –

+0

@MichaelIreyチェックされている場合は必ず提出してください。チェックされていない場合は提出されません。私はどこにデフォルトでチェックするように設定しているのか分からないので、ダイアログが開かれていなければどちらも送信されません。 – tvanfosson

+0

@MichaelIrey - これを見てくださいhttp://jsfiddle.net/bezj8/2/ – tvanfosson

4

私はこれが古い質問ですけど、同じ問題を持っている人のために、より新しいと簡単な解決策があります:「appendTo」オプションは、jQueryのUIで1.10.0

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

を導入されています
$("#dialog").dialog({ 
    appendTo: "#ContactSpeakerForm" 
    .... 
}); 
関連する問題