Question

I have one php function that receives drop down variables through javascript. The variables are processed through the function, and the function returns two results. I would like to show one of the results in div ‘one’ at the top of a page and the other result to display in div ‘two’ which is at the bottom of the same page. How can I do that?

I am using this jScript function to pass the variables from the drop downs to php page

function getRunners() {
var awayRunner = document.getElementById('awayRunner').value;
var homeRunner = document.getElementById('homeRunner').value;

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

}
else {
    xmlhttp13 = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp13.onreadystatechange = function() {
    if(xmlhttp13.readyState == 4 && xmlhttp13.status == 200) {
        document.getElementById("one").innerHTML = xmlhttp13.responseText;
    }
}
xmlhttp13.open("GET", "/Modules/process.php?awayRunner=" + awayRunner + "&homeRunner=" + homeRunner, true);
xmlhttp13.send();

}

in the php page, I have something like this

function getResults($homeRunner,$awayRunner){
  process info...
  echo $homeResult;
  echo $awayResult;
}

getResults($homeRunner,$awayRunner);
?>

I understand the jScript code above only returns to div “one”. how do i incorporate a div “two” into it?

Thank you in advance!

Answer 1

Break up the response. Personally I’d use JSON, but you could get away with something more primitive.

function getResults($homeRunner,$awayRunner) {
    // do stuff
    echo $homeResult."---SEPARATOR---".$awayResult;
}

Then in your JavaScript:

xmlhttp13.onreadystatechange = function() {
    // if readyState and status correct
    var parts = xmlhttp13.responseText.split("---SEPARATOR---");
    // now put parts[0] in one div and parts[1] in the other
}

So long as your separator is anything that doesn’t appear in the results, it’ll work just fine.