Ajax - php - mysql - checkbox

Question

I am trying to create a dynamic system with check boxes for an web based game that I am trying to make using Ajax, PHP and MYsql

Is there a possible way to detect whenever a checkbox is selected/unselected, pull up information from the database and display information based on user's selection dynamically on the website without refreshing the entire page?

So far I have got this ..

My form is being rendered by PHP from a database Like so:

   <form method="POST" action=""> 
<table cellspacing = 6 cellpadding = 2 >
     <tr bgcolor=#dce3b5>
      <td><b>Select &nbsp;&nbsp;</b></td>
      <td><b>Country</b></td>
      <td><b>Player Name</b></td>
      <td><b>Points</b></td>
      <td><b>Total Points</b></td>
      <td><b>Season Rank</b></td>
      <td><b>Cost</b></td>   
     </tr>
 while($row = mysql_fetch_array($result))
  {
  $name = $row['Pname'];
  $PHM = $row['PHM'];
  $nation = $row['nation'];
  echo '<tr>';
  echo '<td>'.'<input type="checkbox" name="team[]" value= "'.$name.'" onClick ="showUser(this.value)">'.'</td>';
  echo'<td>'.$nationf.'</td>';  
  echo '<td>'."$name".'</td>';
  echo '<td>'."$row[points]".'</td>';
  echo '<td>'."$row[tpoints]".'</td>';
  echo '<td>'."$row[seriesrank]".'</td>';
  echo '<td>'."$row[PHM]".'</td>';
  echo  '</tr>';
}

I am detecting whenever the check box is being clicked with

onClick ="showUser(this.value)"

In the code above.

MY javascript component to this code is :

<script type="text/javascript">

var xmlhttp;

function showUser(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="getuser.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}


</script>

The php file .... getuser.php works like this:

$q=$_GET["q"];
// connecting to database and stuff...  

$temp = mysql_query("SELECT PHM FROM current WHERE Pname = '$q' ");
$row = mysql_fetch_assoc($temp); 
$money =$row['PHM'];

echo $money;

and then I am displaying the dynamic element with this

<div id="txtHint"><b>Changing element goes here.</b></div>

Basically, a certain amount of money is associated with a name in my database and I am selecting the names with a check box

eg: Bob ----> 100 Rob ----> 200 Nancy --> 300 Ron ----> 50 Jack ----> 30

If I check Bob and Rob, The dynamic element should say 300, If I uncheck Rob, it should change to 100 without me pressing the submit button.

As of now, it displays the money associated with the last check box I clicked on... I have no idea how to detect all the check boxes that are checked.

If anyone could help me out, it would be great... Thanks in advance :)

Answer 1

I think it's admirable that you are approaching this without the use of any libraries but I really think you can save a lot of time and trouble by doing a couple of things.

First, use jQuery to handle AJAX and DOM selection work. It's good to learn how things work under the hood but I think you're just going to cause yourself all kinds of heartache in the future if you don't use some layer of abstraction between you and the multitude of browser incompatibilities.

Second, in the PHP realm I'm of the opinion that PHP and HTML should not be mixed. That's a lot of the reason, IMHO, PHP gets such a bad rap and makes people like Jeff Atwood's eyes bleed. It just gets to be unmanageable and difficult to read. Use templating of some sort (like Smarty or whatever the kids are using these days) to have separation between the view and the controller code.

Thirdly, you're taking a URL parameter and putting it directly into a query which really should never be done. I don't claim to be a security expert but that looks to be a pretty serious problem - potentially.

Finally, to answer your question:

If all you need to do is add up some values when a user checks some boxes then I would make the value of the checkboxes the actual dollar amount (instead of the name) and then add them up as the user clicks the boxes. If you're using jQuery it would look something like this:

// bind to the click event on all checkboxes
$('input[type=checkbox]').click(function(){   
    // for each checked box, total up all the values 
    var total = 0
    $('input:checked').each(function(){
       total += parseInt($(this).val());
    });

    // display that total in the hint field you mentioned.
    $('#txtHint').val(total);
});

It wouldn't require a trip to the server. That said, that may not be a good idea if you're actually going to take the calculated amount and do something other than just show it to the user. Also, there's no error-checking being done in the sample code so that should just be treated as an idea not a final product.

Answer 2

Karim,

Thanks for the information about Smarty and the question. This should help a lot.

Regards, Ender

Answer 3

Are you looking for the answer of this question : "As of now, it displays the money associated with the last check box I clicked on... I have no idea how to detect all the check boxes that are checked."