Sending individual JSON variables back to php

[MargateSteve]

I have been banging my head against a wall for a few days over this and think that I have read so many alternative ways, I have got myself confused!
 
What I am trying to do is post some information into the database and on success, provide certain variables back to my script (for example last_insert_id) as I would like to show a success message an add an option to a select on that page.
 
I am trying to get this part working without the mysql first just so I understand it. Currently I can post the data, have that received successfully in the processing page (addDetail.php) and send back output from that page........
 
insert.php 

$("#sub").click(function() {
  var name = $("#name").val();
  var town = $("#town").val();
        
  jQuery.ajax({
    type: "POST",
    url: "postScripts/addDetail.php",
   
    data: 'name='+name+'&town='+town,
    
    success: function(html) {

      $(".modal-body").prepend(
          "Returned: " +html
        );
    }
  });
  return false
}) 

addDetail.php

$name = $_POST['name'];
$town = $_POST['town'];
 
//Check $_POST data
echo "<pre>"; print_r($_POST) ;  echo "</pre>";
 
$return["name"] = $name;
$return["town"] = $town;

echo json_encode($return); 

 
 Result in insert.php

Returned:
Array
(
    [name] => The Name
    [town] => The Town
)
{"name":"The Name","town":"The Town"}

This works fine to bring back everything on the processing page in one go but I want to bring back separated variables so I can use them individually. I thought that changing 

 "Returned: " +html

to

 "Returned: " +html.name

would allow me to bring back just that variable but it comes back undefined. This is the closest I have got as other methods I tried either brought nothing back or just [objectObject]. 

 

How would I be able to bring back both 'name' and 'town' as separated values so I can use them individually in my script?

 

Thanks in advance

 

Steve

Edited September 29, 2014 by MargateSteve

[Ch0cu3r]

The problem is insert.php is returning multiple data types HTML and JSON.

 

Remove this line from insert.php 

//Check $_POST data
echo "<pre>"; print_r($_POST) ;  echo "</pre>";

Now JQuery should then auto detect the JSON and parse it into an object.

 

 

 

[MargateSteve]

I have removed that part but trying to call html.name still gives 'Returned: undefined'.

[Strider64]

Personally I would call $return something else, for that is close to using a reserve word that's just me:

// In your JQuery 
$("#sub").click(function() {
  var name = $("#name").val();
  var town = $("#town").val();
        
  jQuery.ajax({
    type: "POST",
    url: "postScripts/addDetail.php",
   
    data: 'name='+name+'&town='+town,
    
    success: function(info) {
     var name = info.name,
         town = info.town;

     /* Continue with code */  
    }
  });
  return false
}) 

Edited September 30, 2014 by Strider64

[AndrewCarter]

You should only respond with pure JSON (otherwise jQuery will get confused) and also tell jQuery to expect JSON back using the data type parameter of the ajax request function.
 

$("#sub").click(function() {

  var name = $("#name").val();

  var town = $("#town").val();



  jQuery.ajax({

    type: "POST",

    url: "postScripts/addDetail.php",

    data: { name: name, town: town },
    dataType: 'json',
 
    success: function(data) {
      $('.modal-body').prepend('Returned: ' + data.name + ' and ' + data.town);
      $('.modal-body').prepend('Whole post: ' + data.whole_post);
    }
  });

});

$json = array();


$json['name'] = $_POST['name'];

$json['town'] = $_POST['town'];



$json['whole_post'] = var_export($_POST, true);
 
echo json_encode($json);