内部带有 jQ​​uery 对话框的表单不提交

Posted 2023-05-09

【中文标题】内部带有 jQ​​uery 对话框的表单不提交

【英文标题】：Form with a jQuery dialog inside does not submit

【发布时间】：2012-04-10 07:09:29

【问题描述】：

我有一个小表单，其中包含一个 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>

有人知道一个好的解决方案吗？

【问题讨论】：

关键问题是对话框被附加到正文中以更容易管理定位......因此它会从您的表单中删除

@charlietfl：是的，这就是问题所在。

【参考方案1】：

设置对话框后，使用：

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

这里有两个关键点。首先，在小部件有机会初始化和更改标记后运行它。其次，您消除了对直接父/子关系的依赖。

【讨论】：

谢谢你的作品！但是还是有不好的副作用。我将对话框中的复选框之一设置为默认检查，如果从未打开对话框，则不会在表单中提交值。有什么想法吗？

@MichaelIrey 如果他们被选中，则应始终提交。如果不检查，则不会提交。我看不到你在哪里设置了一个默认检查，所以如果对话框没有打开，也不会被提交。

感谢您的宝贵意见。出于某种原因，当我尝试使用此eventReg.closest('div.ui-dialog').appendTo('#ContactSpeakerForm'); 时，它会将其移动到表单中，但它也会将其移动到覆盖层后面......所以我什至无法点击它。有什么想法吗？

我发现我有冲突的 z-index 使模态在覆盖层后面

@Anjum eventReg 是 OP 将变量命名为持有他的对话框。您需要将其更改为您将对话框分配给的变量。

【参考方案2】：

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

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

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