i want to display data that the Ajax function receive from php file into different HTML elements.
function getdetails(x)
{
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("fname").value=xmlhttp.responseText;
}
}
Use jQuery for this:
$.ajax({
type:'GET',
url:'url/to/the/file.php',
}.done(function( msg ) {
$('#id-of-element').html(msg);
$('.class-of-other-element').html(msg); // another element
$('.class-of-another-element').html(msg); // another element
});
Explanation:
type: GET // type of http request to the file, could also be POST
url: 'url/to/the/file.php' // provide the file and path to file to communicate with
.done (function(msg)) { // when ajax request is completed (if), then assign the variable 'msg' with the contents of the return.
$('#id-of-element').html(msg); // assign the return data to the html element of your choice.
EDIT:
If you're expecting 2 variables, in the PHP file return them like this:
echo $var1."/".$var2 // where '/' is a symbol you never expect to be returned in either variable.
Then in your Ajax:
$.ajax({
type:'GET',
url:'url/to/the/file.php',
}.done(function( msg ) {
var content = msg;
var varSplit = msg.split('/'); //where '/' is the symbol you chose to use in the stage above.
var var1 = varSplit[0];
var var2 = varSplit[1];
$('.first-element').html(var1);
$('.second-element').html(var2);
});