CODEWITHSUNDEEP
javascriptphpjqueryajax
LiveEn
LiveEn

Reputation: 3253

return multiple values from php to jquery

i have api that returns a list of cities and the relevant geo zone when i type the post code.
eg: 

postcode -3000 returns 9 cities and geo zone - A012 
postcode -3008 returns 12 cities and geo zone - C01

So i have written the below code. Once the post code is entered it will append the cities into a dropdown. which works great

php

        if($response == NULL || $response < 1 )
        { 
        echo "wrong Postcode";
        } else{
        foreach ($response as $q)
        {
            $cty =  $q['city'];
            $geozone =  $q['geozone'];
            echo '<option value="'.$cty.'">'.$cty.'</option>';

        }

jquery

<script type="text/javascript">
$(document).ready(function()
{
$(".postcode").change(function()
{
var dataString = 'postcode='+ id;

$.ajax
({
type: "POST",
url: "load.php",
data: dataString,
cache: false,
success: function(val)
{
        $(".city").html(val);  
}
    });

   });

 });
</script>

the problem is i need to append the $geozone which is returned in the php to a input box

since i have echoed the option values, i can easily append it 

echo '<option value="'.$cty.'">'.$cty.'</option>';

but how do i return $geozone = $q['geozone']; to my main page so i can use it with a text field

Upvotes: 1

Views: 818

Answers (3)

James Malvi
James Malvi

Reputation: 100

You can use extra attribute in option tag like this.

echo '<option value="'.$cty.'" geozone="'.$geozone.'" >'.$cty.'</option>';

This will echo as

<option value="Mumbai" geozone="A012" >Mumbai</option>

and Use jquery's .attr() method to get the value from option

var myTag = $(':selected', element).attr("geozone");

Upvotes: 0

kentverger
kentverger

Reputation: 475

I think that is better build the select from json data. Try to change the php for somthing like this 

    if($response == NULL || $response < 1 )
    { 
        echo "wrong Postcode";
    } else{
        echo json_encode($response);
    }

This will return a json array with the complete response with the cities and geozone, then you need to build the form with JS

$.ajax({
   type: "POST",
   url: "load.php",
   data: dataString,
   cache: false,
   dataType: "json"
   success: function(val)
   {
      options = "";
      for(x in val){
          options += '<option value="'+val[x].city+'">'+val[x].city+'</option>'
      }
      $(".city").html(options);  
      $(".form").append('<input type="text" value="'+val[x].geozone+'">');
   }
});

This will build the form for you. You will have to adapt this code to json response and the .form for the parent selector of your form.

Upvotes: 2

gbvisconti
gbvisconti

Reputation: 412

I would do like this first make one array to return. At index 0 you concatenate options and at index 1 concatenate $geozone in a ipnut hidden (if that is useful).

$dataReturn = array();
$dataReturn[0] = '';
$dataReturn[1] = '';

 if($response == NULL || $response < 1 )
        { 
        echo "wrong Postcode";
        } else{
        foreach ($response as $q)
        {
            $cty =  $q['city'];
            $geozone =  $q['geozone'];
            $dataReturn[0] .= '<option value="'.$cty.'">'.$cty.'</option>';
            $dataReturn[1] .= '<input type='hidden' value="'.$geozone.'"';

        }

echo json_encode(array($dataReturn);

json_encode(array($dataReturn)

Now parse it at success

success: function(val)
{
        parsed = $.parseJSON(val);
        $(".city").html(val[0][0]);
        $(".hidden").html(val[0][1]);   //a div
}

I did not test, but I already did something like that. Hope my memory has helped.

Upvotes: 0

Related Questions