Ajax page filter

I have a table of members from a database. I want to filter the results on the same page without reloading using the following form

<select name="club" onchange="filter(this.value)">
				<option value="">Select A Club</option>
				<option value="1">1</option>
				<option value="2">2</option>
			</select>

The ajax code is

function filter(status){
    var url = "index.php";
    var xmlhttp;

    if(window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }else{// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.open("POST", url, true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("status="+status);
} 

the php on the page doesnt catch the post

$sql = "SELECT * FROM members ";
				if($_POST){
					$club = $_POST['status'];
					$sql .= "WHERE club = $club ";
				}
			$sql .= "ORDER BY surName DESC";

Any help please

How do you know the PHP does not catch the $_POST?

the JavaScript is not handling the response and the PHP is not sending it back…

Maybe there is more you have not shown!

Well the page isnt updating so im guessing it isnt, I dont know much about ajax.
The only other bits i havent shown is the mysql_query and the echoing the results

You will have to do a bit of homework to see how ajax works

Using you work as originally presented…

I have added the missing parts colour coded RED

function filter(status){
    var url = "index.php";  [COLOR="#FF0000"]//this needs to be a PHP file with no html included[/COLOR]
    var xmlhttp;

    if(window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }else{// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    [COLOR="#FF0000"]xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4){
            HandleResponse(xmlhttp.responseText);
        }
    }[/COLOR]

    xmlhttp.open("POST", url, true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("status="+status);
}
[COLOR="#FF0000"]function HandleResponse(txt){
    alert(txt);
}[/COLOR]

with the PHP file I only added * echo $sql *

Note:—> this PHP file has to be the same name as the JavaScript’s URL variable…

you have it as index.php… see comment in JavaScript file… recommend a name like ajaxTest.php


$sql = "SELECT * FROM members ";
if ($_POST) {
    $club = $_POST['status'];
    $sql .= "WHERE club = $club ";
}
$sql .= "ORDER BY surName DESC";


echo $sql;


Now if you get it to work it should place your SQL string in an alert box with the selected number from the HTML option select… Done via the $_POST[‘status’]…