return multiple values from php to jquery

Question

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

put it in hidden field outside <select> tag echo "<input type='hidden' name='geozone' value='".$geozone."' />"; — Vahe Shadunts
– Vahe Shadunts, Commented Sep 30, 2014 at 17:07
Why not return an array of both city and geozone, then use jQuery to append the values where you need them? — ntzm
– ntzm, Commented Sep 30, 2014 at 17:14
why do you overwrite $geozone every pass of foreach loop? is there just one geozone for all? — charlietfl
– charlietfl, Commented Sep 30, 2014 at 17:21

kentverger · Accepted Answer · 2014-09-30 17:23:26Z

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.

+1 for suggesting the use of JSON data transfer. I do think the type=hidden is a good fix for the geozone, per comment by Vahe Shadunts

gbvisconti · Accepted Answer · 2014-09-30 17:20:31Z

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.

James Malvi · Accepted Answer · 2014-09-30 17:26:34Z

0

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");

answered Sep 30, 2014 at 17:26

James Malvi

1007 bronze badges

Collectives™ on Stack Overflow

return multiple values from php to jquery

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related