'Displaying data into two different divs using JavaScript, after fetching it from db

I have to write JavaScript code for a web page to display some data after fetching it from database(using php/mysql). I have two divs (for results), one textfield (for entering parameter) and one button on your html page. Once clicked on the button, I need to call a ajax function which will ultimately make a request for php page on the server. The results will be passed to the client and will be used to dynamically change the contents of the divisions on the html page. You will populate one division with one type of data, other with the remaining data. I am looking to implement this using AJAX technology, PHP and DBMS. I do not wish to use jquery.

I am looking for some help with the Javascript code.

<script>
function fetchData() {
  var yr = document.getElementById('entry').value;
  if (yr.length==0) { 
    document.getElementById("result1").innerHTML="";
    document.getElementById("result2").innerHTML="";
	return;
  }

  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() 
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
	 {
		var content = xmlhttp.responseText;
	if (content == "%<searchword>%")
		document.getElementById("result1").innerHTML = content;
	else		
		document.getElementById("result2").innerHTML = content;	
     }
  }
  xmlhttp.open("GET","db.php?q="+ yr ,true);
  xmlhttp.send(); 
}
</script>
<body>

<form>
Enter year: <input type="text" id="entry" />
<input type="button" value="check here" onclick="fetchData()" />
</form>
<div id="result1">result 1 here</div>
<div id="result2"> result 2 here</div>
</body>

enter image description here

javascripthtmlajax


Solution 1:[1]

<script>
function fetchData() {
  var yr = document.getElementById('entry').value;
  if (yr.length==0) { 
    document.getElementById("result1").innerHTML="";
    document.getElementById("result2").innerHTML="";
    return;
  }

  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() 
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     {
        var content = xmlhttp.responseText;
    if (content == "%<searchword>%")
        document.getElementById("result1").innerHTML = content;
    else        
        document.getElementById("result2").innerHTML = content; 
     }
  }
  xmlhttp.open("GET","db.php?q="+ yr ,true);
  xmlhttp.send(); 
}
</script>
<body>

<form>
Enter year: <input type="text" id="entry" />
<input type="button" value="check here" onclick="fetchData()" />
</form>
<div id="result1">result 1 here</div>
<div id="result2"> result 2 here</div>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Miraziz

Related Questions