Question

I know this question have been asked before but none of the solution seem to work for me.

I have got a form inside a jquery ui dialog box:

<!-- Dialog: Register new user-->
<div id="dialogForUser" title="Register new user">
    <form id="target" action="" method="post" style="HEIGHT: 100%">
  <div class="form_settings">
    <h3>Enter user details:</h3>

    <p><span>name</span>
      <input width=150px id ="edName" name="edName" value="<?php echo htmlentities($name); ?>" />
    </p>
    <p><span>surname</span>
      <input width=150px id ="edSurname" name="edSurname" value="<?php echo htmlentities($surname); ?>" />
    </p>
    <p><span>username</span>
      <input width=150px id ="edUsername" name="edUsername" value="<?php echo htmlentities($username); ?>" />
    </p>
    <p><span>password</span>
      <input width=150px id ="edPassword" name="edPassword" value="<?php echo htmlentities($password); ?>" />
    </p>
    <p><span>confirm password</span>
      <input width=150px name="edConfirmPassword" />
    </p>
    <p><span>security question 1</span>
      <input width=150px name="edSecurityQuestion1" />
    </p>
    <p><span>answer</span>
      <input width=150px name="edSecurityAnswer1" />
    </p>
    <p><span>security question 2</span>
      <input width=150px name="edSecurityQuestion21" />
    </p>
    <p><span>answer</span>
      <input width=150px name="edSecurityAnswer2" />
    </p>
    <p><span>security question 3</span>
      <input width=150px name="edSecurityQuestion3" />
    </p>
    <p><span>answer</span>
      <input width=150px name="edSecurityAnswer3" />
    </p>
    <p><span>company name</span>
      <input width=150px name="edCompanyName" value="<?php echo htmlentities($companyName); ?>" />
    </p>
    <p><span>address line 1</span>
      <input width=150px name="edAddress1" value="<?php echo htmlentities($address1); ?>" />
    </p>
    <p><span>address line 2</span>
      <input width=150px name="edAddress2" value="<?php echo htmlentities($address2); ?>" />
    </p>
    <p><span>address line 3</span>
      <input width=150px name="edAddress3" value="<?php echo htmlentities($address3); ?>" />
    </p>
    <p><span>city</span>
      <input width=150px name="edCity" value="<?php echo htmlentities($city); ?>" />
    </p>
    <p><span>county</span>
      <input width=150px name="edArea" value="<?php echo htmlentities($area); ?>" />
    </p>
    <p><span>post code</span>
      <input width=150px name="edPostalCode" value="<?php echo htmlentities($postalCode); ?>" />
    </p>
    <p><span>country</span>
      <input width=150px name="edCountry" value="<?php echo htmlentities($country); ?>" />
    </p>
    <p><span>telephone</span>
      <input width=150px name="edTelephone" value="<?php echo htmlentities($telephone); ?>" />
    </p>
    <p><span>fax</span>
      <input width=150px name="edFax" value="<?php echo htmlentities($fax); ?>" />
    </p>
    <p><span>e-mail</span>
      <input width=150px name="edEmail" value="<?php echo htmlentities($email); ?>" />
    </p>
    <p><span>website</span>
      <input width=150px name="edWebsite" value="<?php echo htmlentities($website); ?>" />
    </p>
  </div>
</form>

A simple form with few edits. Then I have some jquery code that calls a php file (Users_cntr.php) for processing when the user press the “register button”:

$( "#dialogForUser" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
            buttons:[
                                {text: "Register", click: function() { 
                                    $.ajax({url:Users_cntr.php ,success:function(result){$("button").html(result);}});
                                                                                                            }
                                },
                                {text: "Cancel", click: function() { $(this).dialog("close"); }},
                            ]
    });


    $( "#openerForUser" ).click(function() {
        var dialogWidth = $(this).attr('dialogWidth');
        var dialogHeight = $(this).attr('dialogHeight');

        $( "#dialogForUser" ).dialog( "option", "width", dialogWidth );
        $( "#dialogForUser" ).dialog( "option", "height", dialogHeight );
        $( "#dialogForUser" ).dialog( "open" );
        return false;
    });

As you can see the php file is called using a ajax call (I have to admit that I did not understand how it works!).

All the php does is to create a new user and insert it into the database. My problem is that I don’t know how to pass the values of the ui dialogs to the php file. I assume I need to do some posting and I tried using some of the code suggested in the past but with no results.

Have you tried to do something similar in your project? Can you help?

Thank you very much,

Dino

Answer 1

You need to send the data you want to submit in your button handler:

$.post('Users_cntr.php', $('#target').serialize(), function(result){
    $("button").html(result);
});          

This simply calls your php file on the server, but the second “optional” parameter is the data to send. In this case we’ve taken your form with the id target and told jQuery it needs to be serialized

I changed your $.ajax method to $.post as it’s a shortcut for the same thing and wraps the data-type and type properties. You can read more here:
jQuery Post