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