1

I have a simple form like this :

<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>

I am using jquery ui's dialog function to create a dialogue form like this,

$(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();
                }
        }
    }); 
});

But on the change_pass2.php page, the $_POST array is empty. I've been bagging my head against the monitor trying to figure this out.

3
  • 2
    I notice your hidden input has no name attribute, and therefore won't be in the post, though the others do. Jun 28, 2012 at 2:18
  • Personally, I think it's a really bad idea to hide the username but ask for a password. What would be the reason for doing that? Jun 28, 2012 at 2:26
  • Try and use Chrome Developer Tools (integrated with Chrome) or Firebug to see what actually gets submitted from your form.
    – dvir
    Jun 28, 2012 at 2:26

2 Answers 2

5

jQuery dialog will move the dialog to the end of the body, which is outside the form scope, as stated here. So there won't be any data posted.

You need to do this:

$("#dialog").dialog({your options...}).parent().appendTo($("#change_pass"));
2
  • Actually charlietfl's solution is much more cleaner and efficient. I have to do the appendTo because of the stupid ASP.NET webform.
    – viclim
    Jun 28, 2012 at 2:43
  • Thank you, was looking for this solution
    – Diemuzi
    Jan 31, 2013 at 22:52
2

Since dialog gets appended to body regardless of where you place the element in your code, and will no longer be a child of your form, just change html to have form as child of dialog

<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>

The reason for the append to body is to allow positioning to be based on body

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.