php - JavaScript object literal addition

Question

I am trying to add items to my already defined JS object:

var updateInfo = {
   called: 'UPDATEINFO',
   acct: [insert_php]echo $_SESSION['clientAcc'];[/insert_php]
};

And then in some ajax i called this:

updateInfo.push = ({
      fname: encodeURIComponent(toTitleCase($("#FName").val())),
      lname: encodeURIComponent(toTitleCase($("#LName").val())),
      address1: encodeURIComponent(toTitleCase($("#address1").val())),
      address2: encodeURIComponent(toTitleCase($("#address2").val())),
      city: encodeURIComponent(toTitleCase($("#city").val())),
      state: encodeURIComponent($("#state").val()),
      zip: encodeURIComponent($("#zip").val()),
      email: encodeURIComponent($("#email").val()),
      phone: encodeURIComponent($("#phone").val())
});

console.log(updateInfo);

$.ajax({
    type: "POST",
    url: "../form/master.php",
    data: updateInfo,
    dataType: "html",
    success: function (data, responseText, textStatus) {
       ect ect....

The data looks like this for the JS object:

So i know it does have the data within the JS object.

However, it does not seem to be sending that info to my PHP page the ajax is calling?

if ($called == 'UPDATEINFO') {  
    $fname      = urldecode($_POST['fname']);
    $lname      = urldecode($_POST['lname']);
    $address1   = urldecode($_POST['address1']);
    $address2   = urldecode($_POST['address2']);
    $city       = urldecode($_POST['city']);
    $state      = urldecode($_POST['state']);
    $zip        = urldecode($_POST['zip']);
    $email      = urldecode($_POST['email']);
    $phone      = urldecode($_POST['phone']);

echo 'debug> ' . $fname;

I get debug> and nothing.

What am i doing incorrectly?

Answer 1

Shouldn't it be

$_POST['push']['fname']

?

And otherwise drop a print_r($_POST) to see where your data is at.

Answer 2

You've nested two objects, which isn't standard for x-www-url-formencoded transmission of data from pages to servers.

You need instead to merge the two objects. As you already have jQuery this is trivial with the $.extend() method:

$.extend(updateInfo, {
    fname: toTitleCase($("#FName").val()),
    ...
});

Otherwise:

var extra = {
    fname: toTitleCase($("#FName").val()),
    ...
}

for (var key in extra) {
    if (extra.hasOwnProperty(key)) {
        updateInfo[key] = extra[key];
    }
}

NB: it's unnecessary to manually URL encode and decode the fields - the $.ajax() method will URL encode the field forms automatically.