var xmlHttp = null;
if(window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE5.x & IE6
else if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
else
alert("Your browser does not support AJAX.");
// Processing data
function processData(){
if(xmlHttp != null){
xmlHttp.open("GET","test.php?input="+document.getElementById('inputID').value, true);
xmlHttp.send(null); //because using method GET, so no need to send anything
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
document.getElementById('displayID').innerHTML=xmlHttp.responseText;
}
}
}
}
Code (html)
<html>
<head>
<title> FORM</title>
<meta charset = UTF-8 />
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="java.js" > </script>
<div class="form">
<center>
<h1>Menu
<span> Form </span>
</h1>
<form > Enter your data on space<br><br>
<input type = "text" onkeyup="processData();" name="input" id="inputID"
onClick="click()" target="_blank">
</div>
<div id="displayID" > <b> Result</b> </div>
</div>
</body>
</html>
---text file 01---
MENU MAMA
MENU Mini Fruit Tart
MENU EGG ROLL
MENU Cookkie Cup
---text file 02---
เมนู มินิฟรุตทาร์ต Mini Fruit Tart