Submit a form inside a jquery dialog box

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

Sorry guys I am adding some notes to my own question.

First of all thank you everybody for your help, really appreciated.

My code had another bug: it only submit once. This is because you need to change the following;

$(this).dialog("close");

with this:

$(this).dialog("destroy").remove();

Dino

Answer 2

If you want to pass data with ajax then you can use serialize(), i.e.

$.ajax({
    url:'Users_cntr.php',
    type:'post',  
    data: $("#target").serialize(),
    success:function(result){
        $("button").html(result);
    }
});

Then retrive your data in php from $_POST as

$edName=$_POST['edName'];
$edSurname=$_POST['edSurname'];

Answer 3

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