Question

I’m having trouble working this out for inserting input values into database.

I have something like this

$("form#profileName").submit(function(){
    var updateName = $(this).serialize();
    $.post("update.php",{updateName: updateName},function(data){
        alert(data);
    });
    return false;
});

In my PHP I have something like this

if(isset($_POST['updateName'])){
    $fname = $_POST['updateName']['f_name'];
    $mname = $_POST['updateName']['m_name'];
    $lname = $_POST['updateName']['l_name'];
    $altname = $_POST['updateName']['alt_nam'];

    echo $fname." ".$mname." ".$lname." ".$altname;

}

its echoing out “f f f f” for some reason,

am I doing this correctly?

Thanks

Answer 1

Here’s some documentation on .serialize()
You’re basically serializing it twice.

var updateName = $(this).serialize(); //f_name=somename&m_name=some
$.ajax({
    ...
    data: {updateName: updateName} //{updateName: 'somename&m_name=some'}
    //which is translated into updateName=f_name%3dsomename%26m_name%3dsome
});

I’m going to take a wild guess and say that the reason it’s outputting “f f f f” is because the $_POST['updateName'] is now a single string. Each individual character in PHP is accessed like this $string[n]. I suppose it’s interpreting blank as 0, and gives you the first character, which is in fact “f”.

Here’s how it should look like:

$("form#profileName").submit(function(){
    var updateName = $(this).serialize();
    $.post("update.php",updateName,function(data){
        alert(data);
    });
    return false;
});

or, in my opinion, the beautiful and clean way,

$("form#profileName").submit(function(){
    var updateName = $(this).serialize();
    $.ajax({
        url: "update.php",
        type: "POST",
        data: updateName,
        success: function(msg){
            alert(data);
        }
    });
    return false;
});

And the PHP $_POST variable will now have several values, which are accessed like this:

$_POST['f_name']
$_POST['m_name']
...

Also note that in the PHP script, you might have to use urldecode() or rawurldecode() on your variables, depending on how you send the data in the JS (encodeURI() or encodeURIComponent()).

In this case, serialize() has it’s own internal encodeURI(), so there is no need for it, but the PHP might need to decode it.
If you’re still having problems after you’ve fixed the 2xSerialize, just change the PHP script to decode the encoded data:

$fname = urldecode($_POST['f_name']);
$mname = urldecode($_POST['m_name']);
...

Sidenote:
If you’ve got an ID attr on the form, why not use: $("#profileName").submit(...)?
Makes more sense if you ask me.

Debugging
Depending on what browser you’re using, you can check what XHR is sending to/recieving from the server. In Firefox you can use the plugin called Firebug (XHR panel is under Net->XHR)
Mike also mentioned debugging in Chrome:

Developer tools in chrome -> Network -> XHR at the bottom

---

Final solution

The solution should now look something like this:

Javascript:

$("form#profileName").submit(function(){
    var updateName = $(this).serialize();
    $.ajax({
        url: "update.php",
        type: "POST",
        data: updateName,
        success: function(msg){
            alert(data);
        }
    });
    return false;
});

PHP script “update.php”:

if(isset($_POST)){
    $fname = $_POST['f_name'];    //urldecode($_POST['f_name']);
    $mname = $_POST['m_name'];    //urldecode($_POST['m_name']);
    $lname = $_POST['l_name'];    //urldecode($_POST['l_name']);
    $altname = $_POST['alt_nam']; //urldecode($_POST['alt_nam']);

    echo "$fname $mname $lname $altname";
}