Error in displaying multiple values returned by AJAX function in PHP

Question

Page 1:

I have a drop down menu whose values are passed to an AJAX function on selecting a particular option. And the AJAX function does multiple functionality & produces multiple values in page2. And I want to display all those values at multiple locations in page1. And when I tried doing this, error occurred.

My Page 1:

<selectid="ddl" name="ddl" onchange="show_details(this.value)">
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
</select>

<div id="blah"> display blah here </div>
<div id="woo"> display woo here </div>
<div id="dope"> display dope here </div>

My AJAX function:

function show_details(eid)
{

    if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();

    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()//callback fn
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {

          document.getElementById("blah").innerHTML=xmlhttp.responseText;
          document.getElementById("woo").innerHTML=xmlhttp.responseText;
          document.getElementById("dope").innerHTML=xmlhttp.responseText;


        }
    }

    xmlhttp.open("GET","page2.php?variable4="+eid,true);

    xmlhttp.send();
}

Page2:

<?php
$envv_idd=$_GET["variable4"];

//does operation blah & returns $x

$x= value of blah;
echo $x;

//does operation woo & returns $y

$y= value of woo ;
echo $y;

//does operation dope& returns $z

$z= value of dope;
echo $z;
?>

I want to show $x in div blah, $y in div woo & $z in div dope.

Is there any method?

You're not returning anything from that PHP script, create an array and json_encode it, then echo it to send it back. — adeneo
– adeneo, Commented Jun 9, 2014 at 9:09
But how would you know what is what, now you end up with just one large string when you're echoing like that. — adeneo
– adeneo, Commented Jun 9, 2014 at 9:18
Your page 2 output some values but in your javascript code xmlhttp.responseText will be all those values as a string one after the other. Ideally you want to return a JSON string so that xmlhttp.responseText can be turn into an object making it easy to grab each value. But if you want help you need more info. is your ajax request even returning? — GillesC
– GillesC, Commented Jun 9, 2014 at 9:20

Ranjith · Accepted Answer · 2014-06-09 09:22:14Z

2

$x= value of blah;
$y= value of woo ;
$z= value of dope;

$xyz = array(
         'x' => $x,
         'y' => $y,
         'z' => $z
       );

echo json_encode($xyz);

In your script

if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
    // Your xmlhttp.responseText message returned json value like this
    // {"x":"x text", "y":"y text", "z":"z text"} 

    var jsonStr = JSON.parse(xmlhttp.responseText);

    document.getElementById("blah").innerHTML= jsonStr.x;
    document.getElementById("woo").innerHTML = jsonStr.y;
    document.getElementById("dope").innerHTML= jsonStr.z;
}

answered Jun 9, 2014 at 9:22

Ranjith

2,8393 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Smokey Over a year ago

Your code does not produce any results. Wasted my time on this. @Ranjith

Ranjith Over a year ago

Check whether JSON value is returning from php. In scripts, add this line console.log(xmlhttp.responseText); above var jsonStr = .. declaration.

Collectives™ on Stack Overflow

Error in displaying multiple values returned by AJAX function in PHP

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related