Ajax DB call resulting in unchecking of checkboxes

[UrbanCondor]

Hi all,

I'm having a problem with a combination of Ajax / PHP / Javascript and I'm stuck. I've spent a fair amount of time googling possible solutions but I can't find anything.

What I am trying to do
I am using Ajax to query a MySQL database using an input text box. Typing into this input text box will fill the contents of a DIV located below the text box. For example, if the user wants to find a person with the surname "Smith" then they can type this into the input textbox and the ajax functionality will bring back all people with a first or surname containing "smith".

Now, next to each name displayed is a checkbox, and the idea behind this is that the user checks the checkbox if they want to select that particular person, and then if they want to also select someone with the surname "bloggs" they can replace the contents of the input textbox with "bloggs" (instead of "smith") and the ajax functionality will bring back all people with a first or surname containing "bloggs" and the user can then check that particular person too (i.e. they now have two people selected, "smith and "bloggs")

If you have ever organised an event on facebook then you may know what I am talking about - when you invite guests you can use the search filter above to filter names and then check/select the people you want to add.

My Problem
I know how to do almost all of the above, however the problem I am experiencing is that when the user checks the checkbox next to "smith" and then uses the search filter to search for something different (e.g. "smi") then the checkbox next to smith is re-loaded through ajax and is given a default state of unchecked. This is a problem as it is confusing to the user - they will think it is not selected when it actually is.

I have tried to find a solution to this but I can't, so I am resorting to this cry for help! My code so far is below:

BASIC HTML
Here I have the input field and the results div.

<input type="text" name="input_players" onkeyup="showPlayers(this.value)" />
<br />
<div id="dbResults"></div>

JAVASCRIPT CODE, INCLUDING AJAX STUFF
This is pretty basic AJAX / Javascript I think.

function showPlayers(str){

	//HTTP REQUEST CODE
	if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();} // code for IE7+, Firefox, Chrome, Opera, Safari
	else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}// code for IE6, IE5
	  	
	
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			document.getElementById("dbResults").innerHTML=xmlhttp.responseText;
		}
	}
	
	xmlhttp.open("GET","ajax/get_players.php?q="+str,true);
	xmlhttp.send();
	
}

PHP CODE, INCLUDING DB CALL
This is the get_players.php page referenced in the above javascript.

PHP Code:

<? 
    //DETERMINE INPUT VALUE 
    $input_value=$_GET["q"]; 
     
    //CONNECT TO DATABASE 
    $con = mysql_connect("localhost","root","password"); 
    if (!$con){die('Could not connect: ' . mysql_error());} 
     
    //SELECT DATABASE 
    mysql_select_db("db_players", $con); 
     
    //QUERY 
    $query = "SELECT player_id, player_first_name, player_last_name FROM tbl_player " 
            ."WHERE (player_first_name LIKE '%".$input_value."%' OR player_last_name LIKE '%".$input_value."%') " 
            ."ORDER BY player_last_name, player_first_name"; 

    //EXECUTE QUERY 
    $db_results = mysql_query($query) or die(mysql_error()); 
     
    //PUT RESULTS IN AN ARRAY 
    $results_array = array(); 
    while($row = mysql_fetch_assoc($db_results)){ 
        $results_array[$row['player_id']]['p_id'] = $row['player_id']; 
        $results_array[$row['player_id']]['p_first_name'] = $row['player_first_name']; 
        $results_array[$row['player_id']]['p_last_name'] = $row['player_last_name']; 
    } 
     
    //DISPLAY RESULTS 
    if(sizeof($results_array)>0){ 
        foreach($results_array as $dbr_id => $result_details){ 
            //DECLARE VARIABLES 
            $p_full_name=$result_details['p_last_name'].", ".$result_details['p_first_name']; 
            $return_value .= "<input id='chk_box_".$dbr_id."' type='checkbox' />&nbsp;".$p_full_name."<br />"; 
        } 
    } 
    echo $return_value; 
     
    //CLOSE CONNECTION     
    mysql_close($con); 
?>

I think that's all the code I need to include. I am thinking that maybe I need to write some sort of javascript function that checks the status of the checkbox each time the ajax db results are refreshed and checks the checkbox again if it was already checked previously?

I'm not sure. Any help or advice would be greatly appreciated!

[sunfighter]

I would use two div's. The first <div id="dbResults"></div> and call that Result of Search.
Then when a checkbox is clicked I'd copy and paste that name into the second div called (what? up to you. Maybe 'Invited People')
Then if you do a second search clear the dbResults div and process as before.
NOTE: you do need a remove checkbox next to each name in the second div.