I'm new at Ajax and this code should change the div dynamically in real time when the user type something in the input field but nothing happens.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<!--api to use ajax-->
<script type="text/javascript" src="sarissa/gr/abiss/js/sarissa/sarissa.js"> </script>
<title>Ajax Test</title>
<script>
function loadXMLDoc() {
var xmlhttp;
//parameter
var suggest = document.getElementById("searchbox").value;
//using XMLHttpRequest
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//when xmlhttp be ready...
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//the HTML will be modify
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//the file that will receive and retrieve info
xmlhttp.open("POST","enviar.php",true);
//header to the retrieved information
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//the param will be send
var sendParam = "fname="+suggest;
xmlhttp.send(sendParam);
}
</script>
</head>
<body>
Busca: <input type="text" id="searchbox" />
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onkeypress="loadXMLDoc()">Change Content</button>
</body>
</html>
Change the onkeypress event to onclick.
If you would like the content to change as the user types, add an onkeyup event to the text input element.
First you should put your javascript codes before, your HTML inputs, because, the DOM needs to load the entire document, before it can manupilate it. otherwise, you should put your functions inside the body tag, with onload attribute.
second, use the onclick event instead of onkeypress, I modified your script, and tested it. It works now
<html>
<head></head>
<body>
Busca: <input type="text" id="searchbox" />
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
<script type='text/javascript'>
function loadXMLDoc() {
var xmlhttp;
//using XMLHttpRequest
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//when xmlhttp be ready...
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//the HTML will be modify
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//parameter
var suggest = document.getElementById("searchbox").value;
var sendParam = "fname="+suggest;
//the file that will receive and retrieve info
xmlhttp.open("POST","enviar.php",true);
//header to the retrieved information
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//the param will be send
xmlhttp.send(sendParam);
console.log(xmlhttp);
}
</script>
<body/>