Javascript add MySQL data when checkbox is ticked

Question

I am currently using this javscript and PHP code

<script>
function add(total)
{
    form2.thetotal.value = document.forms["form1" + total].total.value;
}
</script>

<form name="form2">
<table width="800" border="0" cellspacing="0" cellpadding="10" style="position:fixed; z-index:-999; background-color:#FFF;">
  <tr bgcolor="#eeeeee">
    <td>&nbsp;</td>
    <td colspan="2" width="50%"><strong>Total: </strong><input type="text" name="thetotal" id="thetotal" size="20" value="0" /></td>
    <td colspan="2" width="50%"><strong>VAT:</strong> </td>
  </tr>
  <tr bgcolor="#eeeeee">
    <td width="5%">&nbsp;</td>
    <td width="20%"><strong>Invoice Number</strong></td>
    <td width="35%"><strong>Company</strong></td>
    <td width="20%"><strong>Date</strong></td>
    <td width="20%"><strong>Total</strong></td>
  </tr>
  </table>
</form>

<form name="form1">
<table width="800" border="0" cellspacing="0" cellpadding="10">
<?php
$sql="SELECT * from billing_pdf_archive order by invoice_number ASC ";
$rs=mysql_query($sql,$conn) or die(mysql_error());
while($result=mysql_fetch_array($rs))
{
    $counter++;
    $sql2="SELECT * from customer where sequence = '".$result["customer_sequence"]."' ";
    $rs2=mysql_query($sql2,$conn) or die(mysql_error());
    $result2=mysql_fetch_array($rs2);

    $sql3="SELECT * from reseller where sequence = '".$result["reseller_sequence"]."' ";
    $rs3=mysql_query($sql3,$conn) or die(mysql_error());
    $result3=mysql_fetch_array($rs3);

    if($result["customer_sequence"] != '0')
    {
        $company = $result2["company"];
    }
    elseif($result["reseller_sequence"] != '0')
    {
        $company = '<strong>Reseller: </strong>'.$result3["company"];
    }

    $total = $result["total"];

    echo '<tr>
    <td width="5%"><input type="checkbox" name="check" id="check" onclick=\'add('.$total.');\' /></td>
    <td width="20%">'.$result["invoice_number"].'</td>
    <td width="35%">'.$company.'</td>
    <td width="20%">'.$result["datetime"].'</td>
    <td width="20%">&pound;'.$result["total"].'</td>
  </tr>';
}
?>
</table>
</form>

so as you can see it is selecting from the MySQL database and i am trying to make it so when one of the checkboxes is ticked it adds the total into the "thetotal" text field (in form 2) but it is just leaving that box as zero - any ideas on what i could do?

Answer 1

Here is how you can do it (assuming total is int and not float):

<script>
function add(total, this_chk_bx)
{
    //(if its float, use `parseFloat` instead of `parseInt`)

    if(this_chk_bx.checked==true){
    //add if its checked
    var tot_1 = parseInt(form2.thetotal.value);
    form2.thetotal.value = tot_1+parseInt(total);
    }
    else{
    //subtract if its unchecked
    }
}
</script>

.

in your php, you have to send the checkbox like this: onclick=\\'add('.$total.', this);\\'

.

Answer 2

You did not specify the total field for form 1, then it raised javascript error, it wont work. Check it out

                            <script>
            function add(total)
            {
                form2.thetotal.value =  total + parseFloat(document.form1.formtotal.value);
            }
            </script>


            <form name="form1">

            <!-- replace field name formtotal with anything that you want-->
            <!-- replace field value with anything that you get from your mysql result-->
            <input type="text" name="formtotal" id="formtotal" value="10" />
            </form>