php - calculate value of selected checkboxes -

i have php page displaying results of mysql query. adds checkboxes each row. selected rows inserted table on submit.

my application transport planning platform. looking way display total weight of selected rows in real time, box @ top of page dispalying current sum of selected rows.

can guide me on how add functionality existing page.

my code 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` despgoods_alldetails 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 loaddetails (dispatcharea,customer, casenumber, weight,locstatus)                              select `crtd dept`,customer,`case no`,`gross mass`,'in load creation'                             despgoods_alldetails `case no` = '$val'";                              foreach($check $key=>$value)                             {                             $sql="insert loaddetails (dispatcharea,customer, casenumber, weight,locstatus)                             select `crtd dept`,customer,`case no`,`gross mass`,'in load creation'                             despgoods_alldetails `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    // if successful redirect php.php  mysql_close(); ?> </table> </form> </td> </tr> </table> 

the output of above code shown below:

as others have said, you'll have in javascript, since it'll on client side. i'll assume you're not using library such jquery or prototype on page, , if you're doing, it'd massive overkill use 1 of them.

first, add html element contain total:

<div>total: <span id="total">0</span></div> 

the bit of information need know however, weight corresponds each checkbox. simplest method store on checkbox element itself. add attribute called data-weight. eg:

<input type="checkbox" name="check[]" value="12" data-weight="1234" /> 

then, add 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         ;         (i = 0, l = checkboxes.length; < l; ++i) {             checkboxes[i].onclick = handleclick;         }     }()); </script> 

aaaannd here's working demo you! http://jsbin.com/ipeduf