ajax page filter

[Cyanide_Pierce]

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

[olePhart]

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!

[Cyanide_Pierce]

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

[olePhart]

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";  //this needs to be a PHP file with no html included
    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.onreadystatechange = function(){
        if(xmlhttp.readyState == 4){
            HandleResponse(xmlhttp.responseText);
        }
    }

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

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']..