jQuery对话框表单提交不发布值答案

【问题标题】：jQuery dialog form submission not POSTing valuesjQuery对话框表单提交不发布值
【发布时间】：2012-06-29 12:51:41
【问题描述】：

我有一个这样的简单表格：

<form method="post" name="change_pass" id="change_pass" action="change_pass2.php">
    <input type="hidden" id="uid" value="<?php echo $userid ?>">
    <div id="dialog" style="display:none">
        <input type="text" name="pass" id="pass">Password :
        <input type="text" name="conf_pass" id="conf_pass">Confirm Password:
    </div>
</form>
<div id="weak" style="display:none" title="Weak password">
    <p >Please make sure your password is atleast 8 characters</p>
</div>
<div id="mismatch" style="display:none" title="Failure">
    <p>Password mismatch</p>
</div>
</body>
</html>

我正在使用jquery ui的对话功能来创建这样的对话表单，

$(function(){
    $('#dialog').dialog({
        title : 'You must change your password',
        modal : true,
        closeOnEscape: false,
        dialogClass: 'no-close',
        resizable: false,
        draggable: false,
        buttons: {
            'Change Password' : function() {
                if ( $('#pass').val().length <  8 || $('#pass').val() == 'dantours')  {                         
                    $('#weak').dialog();
                }
                else if ( $('#pass').val() != $('#conf_pass').val()){
                    $('#mismatch').dialog();
                }
                else 
                    $('#change_pass').submit();
                }
        }
    }); 
});

但是在 change_pass2.php 页面上，$_POST 数组是空的。我一直把头靠在显示器上试图弄清楚这一点。

【问题讨论】：

我注意到您的隐藏输入没有 name 属性，因此不会出现在帖子中，尽管其他人有。
就个人而言，我认为隐藏用户名但要求输入密码是一个非常糟糕的主意。这样做的原因是什么？
尝试使用 Chrome 开发者工具（与 Chrome 集成）或 Firebug 来查看实际从您的表单提交的内容。

标签： php jquery jquery-ui

【解决方案1】：

jQuery 对话框会将对话框移动到正文的末尾，即在表单范围之外，如 here 所述。所以不会发布任何数据。

你需要这样做：

$("#dialog").dialog({your options...}).parent().appendTo($("#change_pass"));

【讨论】：

实际上 charlietfl 的解决方案更加清洁和高效。由于愚蠢的 ASP.NET 网络表单，我必须执行 appendTo。
谢谢，正在寻找这个解决方案

【解决方案2】：

由于无论您将元素放在代码中的哪个位置，对话框都会附加到正文，并且不再是表单的子级，只需将 html 更改为将表单作为对话框的子级

<div id="dialog" style="display:none">
   <form method="post" name="change_pass" id="change_pass" action="change_pass2.php">
       <input type="hidden" id="uid" value="<?php echo $userid ?>">    
         <input type="text" name="pass" id="pass">Password :
        <input type="text" name="conf_pass" id="conf_pass">Confirm Password:    
   </form>
</div>

附加到body的原因是允许定位基于body

【讨论】：