Форма с диалоговым окном JQuery внутри не отправляет

Question

У меня есть небольшая форма, которая содержит диалоговое окно jQuery UI, чтобы запросить дополнительную информацию, если установлен определенный флажок. Откроется диалоговое окно и содержит 2 дополнительных флажка.

Проблема в том, что при отправке формы 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>

Кто-нибудь знает хорошее решение?

Answer 1

Я знаю, что это старый вопрос, но для тех, у кого такая же проблема, есть более новое и более простое решение: в jQuery UI 1.10.0

была добавлена ​​опция "appendTo"http://api.jqueryui.com/dialog/#option-appendTo

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

Answer 2

После настройки вашего диалога, используйте:

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

Здесь есть две ключевые вещи. Сначала вы запускаете это после того, как у виджета была возможность инициализировать и изменить разметку. Во-вторых, вы удалите зависимость от прямых отношений родитель / ребенок.