Get multipe response using AJAX and PHP - php

Question

Is it possible to get multiple responses using AJAX and PHP?
The event triggered by a select box and when it changes value (onchange) it calls the JavaScript function and get xmlhttp.responseText.
But on responseText we can only change one value/innerHtml based on id.
I want to change 2 or more HTML using AJAX. Is it possible?
Here is my AJAX function:
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState != 4 && xmlhttp.status == 200) {
document.getElementById("txtStockQTY"+baris).value = "Validating..";
}
else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtStockQTY"+baris).value = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "ajaxGetStock.php?id="+id, true);
xmlhttp.send();`
And ajaxGetStock follows:
$idbarang = $_GET['id'];
include "../connect.php";
$resultSetStockType = mysql_query("SELECT STOCK_QTY,STOCK_QTYUNIT,STOCK_SIZE,STOCK_SIZE2 FROM TSTOCK WHERE STOCK_ID = $idbarang",$con);
if($resultSetStockType and mysql_num_rows($resultSetStockType) > 0) {
while($rowSetStockType = mysql_fetch_array($resultSetStockType)) {
echo $rowSetStockType['STOCK_QTY']." ".$rowSetStockType['STOCK_QTYUNIT'];
}
}
else {
echo "--- stok tidak ditemukan ---";
}
I want to get several return values from my AJAX and assign it to several inputs of type text.

Answer 1

Return JSON like this in php:
return json_encode([
'firstValue ' => 'my first value',
'secondValue' => 'my second value'
]);
Then in JS:
var data = JSON.parse(xmlhttp.responseText);
document.getElementById("txtStockQTY"+baris).value = data.firstValue;
Note: I hate jQuery except for one thing: ajax calls. I advise you to use it in order to avoid all these lines of code that makes the code hard to read :)

Answer 2

Instead of echoing the results straight from the database, you need to store them in an array and echo the JSON encoded array.
$array = array();
while($rowSetStockType = mysql_fetch_array($resultSetStockType)){
$tempval = $rowSetStockType['STOCK_QTY']." ".$rowSetStockType['STOCK_QTYUNIT'];
$array.push($tempval);
}
//When its done processing all the returned values, echo json_encoded array.
echo json_encode($array);
you will then have access to the array from javascript.

Answer 3

There are several ways to solve this problem, i'll try to explain some of them.
Return HTML elements
Return HTML code with inputs from your AJAX code and add them to a div with the use of innerHTML instead of .value like you are doing now.
Return JSON
Return the code as a JSON object with json_encode and use JavaScript JSON functions to populate your inputs. Alan Tan already provided you with an example while I'm typing this.