JQuery UI 对话框表单元素未与表单一起提交答案

【问题标题】：JQuery UI dialog form elements not being submitted with a formJQuery UI 对话框表单元素未与表单一起提交
【发布时间】：2013-09-20 13:18:13
【问题描述】：

我在提交的表单中有一个对话框 div。 div 由使用 JavaScript 动态填充的复选框填充。当我单击链接打开对话框时，选择几个复选框，关闭，提交，我的 PHP 进程页面没有将选定的复选框注册为 POST 项。

所以，我相信因为复选框是在页面加载后动态生成的，它们实际上并没有注册为表单中的元素？它是否正确？有了这些知识（或缺乏知识），我不知道如何规避这一点。

任何帮助将不胜感激，我四处寻找帮助无济于事。

HTML：

<form action="submit.php" method="POST">

        <div id="dialog" style="font-size:14px;">
            <div id="states_container">
                <div style="width:33%; float:left;" id="col1">

                </div>

                <div style="width:33%; float: left;" id="col2">

                </div>

                <div style="width:33%; float: left;" id="col3">

                </div>
            </div>

        </div>
   <input type="submit" value="Submit">
</form>

submit.js（是的，我知道这是糟糕的代码，但我要重构）：

$(function() {
    $( "#dialog-link" ).click(function( event ) {
        $( "#dialog" ).dialog( "open" );
        event.preventDefault();
    });

    $( "#dialog" ).dialog({
    autoOpen: false,
    width: 600,
    buttons: [
        {
            text: "Ok",
            click: function() {
                $( this ).dialog( "close" );
            }
        },
        {
            text: "Cancel",
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
    });

    var states1 = {
        AL: "Alabama", 
        AK: "Alaska", 
        AZ: "Arizona", 
        AR: "Arkansas", 
        CA: "California", 
        CO: "Colorado", 
        CT: "Connecticut", 
        DE: "Delaware", 
        DC: "District Of Columbia", 
        FL: "Florida", 
        GA: "Georgia", 
        HI: "Hawaii", 
        ID: "Idaho", 
        IL: "Illinois", 
        IN: "Indiana", 
        IA: "Iowa",
        KS: "Kansas"
    };

    var states2 = {

        KY: "Kentucky", 
        LA: "Louisiana", 
        ME: "Maine", 
        MD: "Maryland", 
        MA: "Massachusetts", 
        MI: "Michigan", 
        MN: "Minnesota", 
        MS: "Mississippi", 
        MO: "Missouri", 
        MT: "Montana",
        NE: "Nebraska",
        NV: "Nevada",
        NH: "New Hampshire",
        NJ: "New Jersey",
        NM: "New Mexico",
        NY: "New York",
        NC: "North Carolina"
    };

    var states3 = {
        ND: "North Dakota",
        OH: "Ohio", 
        OK: "Oklahoma", 
        OR: "Oregon", 
        PA: "Pennsylvania", 
        RI: "Rhode Island", 
        SC: "South Carolina", 
        SD: "South Dakota",
        TN: "Tennessee", 
        TX: "Texas", 
        UT: "Utah", 
        VT: "Vermont", 
        VA: "Virginia", 
        WA: "Washington", 
        WV: "West Virginia", 
        WI: "Wisconsin", 
        WY: "Wyoming"
    };



    $.each(states1, function(key, value) {
        $('#col1').append(
            '<label for="' + value + '"><input type="checkbox" name="'+value+'" id="'+value+'">'+value+'</label><br/>'
        );
    });


    $.each(states2, function(key, value) {
        $('#col2').append(
            '<label for="' + value + '"><input type="checkbox" name="'+value+'" id="'+value+'">'+value+'</label><br/>'
        );
    });


    $.each(states3, function(key, value) {
        $('#col3').append(
            '<label for="' + value + '"><input type="checkbox" name="'+value+'" id="'+value+'">'+value+'</label><br/>'
        );
    });
});

【问题讨论】：

您是否尝试过将表单嵌套在对话框 div 中（作为其子项）？
我的猜测是 jQueryUI 分离了对话框 div 并将其附加到正文中，因此对话框中的表单元素不再是表单的子元素。
j08691：不，不幸的是，我在对话框 div 之前有大量的表单元素。为了便于阅读，我将它们从我发布的来源中删除。
@TimAych - 如果没记错的话，我相信 Jason P 是正确的。您可以通过在创建对话框后使用浏览器开发者工具检查 DOM 来检查这一点。
我想一种解决方案是克隆对话框中的表单元素并在提交之前将它们附加到表单中。

标签： jquery html

【解决方案1】：

把它放在表单标签中

<div id="dvDialog"></div>

在打开表单时，在打开对话框命令之前将其放在 jQuery 中

$('#dialog').parent().appendTo('#dvDialog');

我们需要这样做是因为，当打开对话框时，它会附加在 DOM 中，而不是附加在 Form 标签中，并且我们知道，当我们应该将数据发布到任何页面时，我们需要在 form 标签中进行控件或输入，所以这种方式我们在 div 中添加对话框，放置在表单标签内的 DOM 中的表单标签下方。

【讨论】：