calculate value of selected checkboxes - php

Question

I have a PHP page displaying the results of a MySQL query. It adds checkboxes to each row. The selected rows are then inserted into another table on submit.
My application is a Transport planning platform. I am looking for a way to display the total weight of the selected rows in real time, a box at the top of the page dispalying the current sum of the selected rows.
Can anybody guide me on how to add this functionality to my existing page.
My code currently is shown below:
<?php
mysql_connect("localhost", "username", "password")or die("cannot connect");
mysql_select_db("databasename")or die("cannot select DB");
$sql="SELECT `crtd dept`,`customer`,`case no`,`gross mass` from despgoods_alldetails where transporttypename= 'localpmb'";
$result=mysql_query($sql);
$count=mysql_num_rows($result);
?>
<table border=1>
<tr>
<td>
<form name="form1" method="post">
<table>
<tr>
<td>#</td>
<td>Dispatch Area</td>
<td>Customer</td>
<td>Case Number</td>
<td>Weight</td>
</tr>
<?php
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><input type="checkbox" name=check[] value="<?php echo $rows['case no']; ?>"></td>
<td><?php echo $rows['crtd dept']; ?></td>
<td><?php echo $rows['customer']; ?></td>
<td><?php echo $rows['case no']; ?></td>
<td><?php echo $rows['gross mass']; ?></td>
</tr>
<?php
}
?>
<tr>
<td colspan=3><input name="Next" type="submit" id="Next" value="Next"></td>
</tr>
<?php
$check=$_POST['check'];
if($_REQUEST['Next']=='Next'){
{
$sql="INSERT INTO loaddetails (dispatcharea,Customer, casenumber, weight,LOCStatus)
SELECT `crtd dept`,Customer,`case no`,`gross mass`,'in Load Creation'
FROM despgoods_alldetails WHERE `Case No` = '$val'";
foreach($check as $key=>$value)
{
$sql="INSERT INTO loaddetails (dispatcharea,Customer, casenumber, weight,LOCStatus)
SELECT `crtd dept`,Customer,`case no`,`gross mass`,'in Load Creation'
FROM despgoods_alldetails WHERE `Case No` = '$value'";
$final=mysql_query($sql);
if($final)
{
echo "<meta http-equiv=\"refresh\" content=\"0;URL=planlocalpmbstep2.php\">";
} }
}
}
// Check if delete button active, start this
// if successful redirect to php.php
mysql_close();
?>
</table>
</form>
</td>
</tr>
</table>
The output of the above code is shown below:

Answer 1

As the others have said, you'll have to do this in Javascript, since it'll be on the client side. I'll assume that you're not using a library such as jQuery or Prototype on this page, and if this is all you're doing, it'd be massive overkill to use one of them.
First, add a HTML element which will contain your total:
<div>Total: <span id="total">0</span></div>
The bit of information you really need to know however, is the weight which corresponds to each checkbox. The simplest method would be to store it on the checkbox element itself. Add an attribute called data-weight. eg:
<input type="checkbox" name="check[]" value="12" data-weight="1234" />
Then, add some javascript:
<script>
(function () {
var totalEl = document.getElementById('total'),
total = 0,
checkboxes = document.form1['check[]'],
handleClick = function () {
total += parseInt(this['data-weight'], 10) * (this.checked ? 1 : -1);
totalEl.innerHTML = total;
},
i, l
;
for (i = 0, l = checkboxes.length; i < l; ++i) {
checkboxes[i].onclick = handleClick;
}
}());
</script>
Aaaannd here's a working demo for you! http://jsbin.com/ipeduf

Answer 2

Assuming you don't want to have to refresh the page every time the user changes a selection, you need to do this in the browser, in Javascript, not in PHP.

Answer 3

I think that you can use a javascript function.
Add an onClick attribute to every checkbox (if you don't want a submit button):
<INPUT TYPE="checkbox" NAME="switchBox" onclick="myfunction(this)">
Then myfunction should calculate the value with something like that:
<script language="javascript">
var total;
myfunction(checkboxId){
total = total + checkboxId.value;
}
</script>
Please notice that this is an unchecked example, only to give you an idea about a solution.

Answer 4

To avoid the need to submit and reaload the page on changes, I would use javascript / jQuery.
What I would do is:
attach all individual weight values to the table rows (or checkboxes...) using the html5 data attribute: <tr data-weight="1604"> for your first row;
on a checkbox value change, loop through all rows that have a selected checkbox to get and generate your sum. That would be something like:
$("input").change(function(){
var total_sum = 0;
$('input').is(':checked').each(function(){
total_sum += $(this).parents("tr").data("weight");
});
});
(can't get the formatting right...)
display the sum in the box you want.