I've a really simple case , but made me confused , here is script =>
<!DOCTYPE html>
<html>
<head>
<title>HI</title>
<link rel="stylesheet" href="./scripts/css/default.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form name="ok" method="post" action="index.php">
<select name="sel" id="sel"><option value="a">1</option><option value="b">2</option><option value="c">3</option></select>
</form>
FIRST PAGE
<div id="as"></div>
<script type="text/javascript">
document.getElementById("sel").onchange = function(){
var doc = false;
if (window.XMLHttpRequest){
doc = new XMLHttpRequest();
}
if(doc){
doc.open("POST","./index.php",true);
doc.onreadystatechange = function(){
if (doc.status==200 && doc.readyState==4){
document.getElementById("as").innerHTML = doc.responseText;
}
};
doc.send("sel=" + document.getElementById("sel").value);
}
};
</script>
<?php
if (isset($_POST['sel'])){
echo $_POST['sel'];
}
?>
</body>
</html>
from this script I expect that onselect change returns me value of the select element , but it returns whole page again , why ? any ideas ? please help , thanks :))
PS. this is self index.php page
Create a separate php file to handle to your ajax requests that way ajax request will only show you the the texts echoed out by the php file.
This is my example code:
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
if (isset($_POST['sel'])){
echo "yeah";
}
}else{die('You are not allowed to access this page!');}