内部带有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

设置对话框后，使用：

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

这里有两件事。首先，在小部件有机会初始化和更改标记之后运行此代码。其次，删除对直接父/子关系的依赖。

Answer 2

我知道这是一个古老的问题，但是对于有相同问题的任何人，都有一个更新，更简单的解决方案：jQuery UI 1.10.0中引入了“ appendTo”选项

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

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