Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Auto calculate values

    Hi.I have found this nice code through forum.Now I want to modify it a little bit.But dont know how to
    It calculates amount column value by multiplying quantity to amount.i.e. amount=qty*rate and gross total is sum of all the array elements in amount.Here I want to add two more columns viz vat% and vat amount.Simply it will be amount*vat% / 100.Can anyone please tell me how I can do that?Other thing is, is it possible to separate the 5% vat and 12.5% vat values and display the total of them in respective column?
    Here is the link for reference : http://kavisandeepdwivedi.com/forum.php
    Please go through the code below and help me out
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function tot(elem) {
    var d=document.getElementById("total").value;
    var total=Number(d); 
    var e=document.getElementById("vat5").value;
    var vat5=Number(e); 
    var f=document.getElementById("vat12_5").value;
    var vat12_5=Number(f); 
    var g=document.getElementById("cash_discount").value;
    var cash_discount=Number(g); 
    
    var h=(total+vat5+vat12_5)-cash_discount;
    document.getElementById("grand_total").value = h;
    }
    
    var total = 0;
    function getValues() {
    var qty = 0;
    var rate = 0;
    var obj = document.getElementsByTagName("input");
          for(var i=0; i<obj.length; i++){
             if(obj[i].name == "qty[]"){var qty = obj[i].value;}
             if(obj[i].name == "rate[]"){var rate = obj[i].value;}
             if(obj[i].name == "amt[]"){
              		if(qty > 0 && rate > 0){obj[i].value = qty*rate;total+=(obj[i].value*1);}
              				else{obj[i].value = 0;total+=(obj[i].value*1);}
              		}
             	 }
            document.getElementById("total").value = total*1;
            total=0;
    }
    
    </script>
    <script type="text/javascript">
    function addRow(tableID) {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
                var colCount = table.rows[0].cells.length;
                for(var i=0; i<colCount; i++) {
                    var newcell = row.insertCell(i);
                    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                    //alert(newcell.childNodes);
                    switch(newcell.childNodes[0].type) {
                        case "text":
                                newcell.childNodes[0].value = "";
                                break;
                        case "checkbox":
                                newcell.childNodes[0].checked = false;
                                break;
                        case "select-one":
                                newcell.childNodes[0].selectedIndex = 0;
                                break;
                    }
                }
            }
    		
    				function deleteRow(tableID)
    {
                try
                     {
                    var table = document.getElementById(tableID);
                    var rowCount = table.rows.length;
                        for(var i=0; i<rowCount; i++)
                            {
                            var row = table.rows[i];
                            var chkbox = row.cells[0].childNodes[0];
                            if (null != chkbox && true == chkbox.checked)
                                {
                                if (rowCount <= 1)
                                    {
                                    alert("Cannot delete all the rows.");
                                    break;
                                    }
                                table.deleteRow(i);
                                rowCount--;
                                i--;
                                }
                            }
                        } catch(e)
                            {
                            alert(e);
                            }
       getValues();
    }
    </script>
    </head>
    <body>
    <form name="gr" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" onSubmit="return validateForm(this)">
    <tr>
    <td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" >&nbsp;
    <input type="button" value="Delete Row" onClick="deleteRow('dataTable')" ></td>
    <table width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text" border="0">
    <td width="20"></td>
    <td width="80" class="forhead" style="white-space:nowrap;">Qty</td>
    <td width="80" class="forhead" style="white-space:nowrap;">Rate</td>
    <td width="80" class="forhead" style="white-space:nowrap;">Amount</td>
    <td width="80" class="forhead" style="white-space:nowrap;">Vat</td>
    <td width="80" class="forhead" style="white-space:nowrap;">Vat Amount</td>
    </tr>
    </table>
    <table border="0" id="dataTable" width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text">
    <tr>
    <td class="forhead" style="white-space:nowrap;" width="20"><input type="checkbox" name="chk[]"/></td>
    <td class="forhead" style="white-space:nowrap;" width="80"><input type="text"  name="qty[]"  onkeyup="getValues()" style="width:80px;" onBlur=""></td>
    <td class="forhead" style="white-space:nowrap;" width="80"><input type="text"  name="rate[]" onKeyUp="getValues()" style="width:80px;" value=""></td>
    <td class="forhead" style="white-space:nowrap;" width="80"><input type="text"  name="amt[]" style="width:80px;" 
    onKeyUp="getValues()"></td>
    <td width="80" align="right" class="forhead" style="white-space:nowrap;">
    <select name="vat[]" style="width:80px" onChange="getValues()">
    <option value="0">Select</option>
    <option value="5">5</option>
    <option value="12.5">12.5</option>
    </select>
    </td>
    <td class="forhead" style="white-space:nowrap;" width="80"><input type="text"  name="vat_amt[]" style="width:80px;"></td>
    </tr>
    </table>
    <table width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text" border="0">
    <tr>
    <td width="20" class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td width="80" class="forhead" style="white-space:nowrap;">Gross Total:</td>
    <td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td width="80" class="forhead" style="white-space:nowrap;"><input type="text"  id="total" name="total[]" style="width:80px;" value=""></td>
    
    </tr>
    <tr>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">Vat 5%:</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;"><input type="text"  name="vat5[]" id="vat5" style="width:80px;"></td>
    </tr>
    <tr>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">Vat 12.5%:</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;"><input type="text"  name="vat12_5[]" id="vat12_5" style="width:80px;"></td>
    </tr>
    <tr>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">Cash Dis :</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;"><input type="text"  id="cash_discount" name="cash_discount[]" style="width:80px;" value=""></td>
    </tr>
    <tr>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">Total :</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;"><input type="text"  name="grand_total" id="grand_total" onKeyUp="tot()" style="width:80px;"></td>
    </tr>
    <tr>
    <td align="center" colspan="6">
    <input name="Submit" type="submit" value="Save" style="text-decoration:none"/>
    <input type="reset" value="Cancel" onClick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'">
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </form>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,501
    Thanks
    72
    Thanked 105 Times in 104 Posts
    This is Javascript coding
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #3
    New Coder
    Join Date
    Nov 2011
    Location
    New England
    Posts
    62
    Thanks
    0
    Thanked 10 Times in 10 Posts
    Quote Originally Posted by anita_86 View Post
    Hi.I have found this nice code through forum.Now I want to modify it a little bit.But dont know how to
    It calculates amount column value by multiplying quantity to amount.i.e. amount=qty*rate and gross total is sum of all the array elements in amount.Here I want to add two more columns viz vat% and vat amount.Simply it will be amount*vat% / 100.Can anyone please tell me how I can do that?Other thing is, is it possible to separate the 5% vat and 12.5% vat values and display the total of them in respective column?
    Here is the link for reference : http://kavisandeepdwivedi.com/forum.php
    Please go through the code below and help me out
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function tot(elem) {
    var d=document.getElementById("total").value;
    var total=Number(d); 
    var e=document.getElementById("vat5").value;
    var vat5=Number(e); 
    var f=document.getElementById("vat12_5").value;
    var vat12_5=Number(f); 
    var g=document.getElementById("cash_discount").value;
    var cash_discount=Number(g); 
    
    var h=(total+vat5+vat12_5)-cash_discount;
    document.getElementById("grand_total").value = h;
    }
    
    var total = 0;
    function getValues() {
    var qty = 0;
    var rate = 0;
    var obj = document.getElementsByTagName("input");
          for(var i=0; i<obj.length; i++){
             if(obj[i].name == "qty[]"){var qty = obj[i].value;}
             if(obj[i].name == "rate[]"){var rate = obj[i].value;}
             if(obj[i].name == "amt[]"){
              		if(qty > 0 && rate > 0){obj[i].value = qty*rate;total+=(obj[i].value*1);}
              				else{obj[i].value = 0;total+=(obj[i].value*1);}
              		}
             	 }
            document.getElementById("total").value = total*1;
            total=0;
    }
    
    </script>
    <script type="text/javascript">
    function addRow(tableID) {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
                var colCount = table.rows[0].cells.length;
                for(var i=0; i<colCount; i++) {
                    var newcell = row.insertCell(i);
                    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                    //alert(newcell.childNodes);
                    switch(newcell.childNodes[0].type) {
                        case "text":
                                newcell.childNodes[0].value = "";
                                break;
                        case "checkbox":
                                newcell.childNodes[0].checked = false;
                                break;
                        case "select-one":
                                newcell.childNodes[0].selectedIndex = 0;
                                break;
                    }
                }
            }
    		
    				function deleteRow(tableID)
    {
                try
                     {
                    var table = document.getElementById(tableID);
                    var rowCount = table.rows.length;
                        for(var i=0; i<rowCount; i++)
                            {
                            var row = table.rows[i];
                            var chkbox = row.cells[0].childNodes[0];
                            if (null != chkbox && true == chkbox.checked)
                                {
                                if (rowCount <= 1)
                                    {
                                    alert("Cannot delete all the rows.");
                                    break;
                                    }
                                table.deleteRow(i);
                                rowCount--;
                                i--;
                                }
                            }
                        } catch(e)
                            {
                            alert(e);
                            }
       getValues();
    }
    </script>
    </head>
    <body>
    <form name="gr" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" onSubmit="return validateForm(this)">
    <tr>
    <td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" >&nbsp;
    <input type="button" value="Delete Row" onClick="deleteRow('dataTable')" ></td>
    <table width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text" border="0">
    <td width="20"></td>
    <td width="80" class="forhead" style="white-space:nowrap;">Qty</td>
    <td width="80" class="forhead" style="white-space:nowrap;">Rate</td>
    <td width="80" class="forhead" style="white-space:nowrap;">Amount</td>
    <td width="80" class="forhead" style="white-space:nowrap;">Vat</td>
    <td width="80" class="forhead" style="white-space:nowrap;">Vat Amount</td>
    </tr>
    </table>
    <table border="0" id="dataTable" width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text">
    <tr>
    <td class="forhead" style="white-space:nowrap;" width="20"><input type="checkbox" name="chk[]"/></td>
    <td class="forhead" style="white-space:nowrap;" width="80"><input type="text"  name="qty[]"  onkeyup="getValues()" style="width:80px;" onBlur=""></td>
    <td class="forhead" style="white-space:nowrap;" width="80"><input type="text"  name="rate[]" onKeyUp="getValues()" style="width:80px;" value=""></td>
    <td class="forhead" style="white-space:nowrap;" width="80"><input type="text"  name="amt[]" style="width:80px;" 
    onKeyUp="getValues()"></td>
    <td width="80" align="right" class="forhead" style="white-space:nowrap;">
    <select name="vat[]" style="width:80px" onChange="getValues()">
    <option value="0">Select</option>
    <option value="5">5</option>
    <option value="12.5">12.5</option>
    </select>
    </td>
    <td class="forhead" style="white-space:nowrap;" width="80"><input type="text"  name="vat_amt[]" style="width:80px;"></td>
    </tr>
    </table>
    <table width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text" border="0">
    <tr>
    <td width="20" class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td width="80" class="forhead" style="white-space:nowrap;">Gross Total:</td>
    <td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td width="80" class="forhead" style="white-space:nowrap;"><input type="text"  id="total" name="total[]" style="width:80px;" value=""></td>
    
    </tr>
    <tr>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">Vat 5%:</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;"><input type="text"  name="vat5[]" id="vat5" style="width:80px;"></td>
    </tr>
    <tr>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">Vat 12.5%:</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;"><input type="text"  name="vat12_5[]" id="vat12_5" style="width:80px;"></td>
    </tr>
    <tr>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">Cash Dis :</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;"><input type="text"  id="cash_discount" name="cash_discount[]" style="width:80px;" value=""></td>
    </tr>
    <tr>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">Total :</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td class="forhead" style="white-space:nowrap;"><input type="text"  name="grand_total" id="grand_total" onKeyUp="tot()" style="width:80px;"></td>
    </tr>
    <tr>
    <td align="center" colspan="6">
    <input name="Submit" type="submit" value="Save" style="text-decoration:none"/>
    <input type="reset" value="Cancel" onClick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'">
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </form>
    </body>
    </html>
    This is not really php. and javascript math is pretty easy. you want "amount*vat% / 100"?

    Code:
    amount= (total * vat ) / 100
    Your code is kind of confusing so you will need to code in the values [probably by variables taken from getElementById]

    and as for doing multiple "vat" totals, that's not too hard, just do another calculation with the vat percentage different, and set it to another value, then put it in a table.
    For programming information, visit irnsystems.com
    Also check out Points2Survey and earn items.

  • #4
    New Coder
    Join Date
    Mar 2011
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your reply.I tried this with the code.But its not working as im not too well with javascript. I guess I posted it in wrong forum

    Can you please explain how can I separate the different vat values in a variable?Because the names of the fields will be the same and I dont find easier way to separate them.

  • #5
    New Coder
    Join Date
    Nov 2011
    Location
    New England
    Posts
    62
    Thanks
    0
    Thanked 10 Times in 10 Posts
    Quote Originally Posted by anita_86 View Post
    Thanks for your reply.I tried this with the code.But its not working as im not too well with javascript. I guess I posted it in wrong forum

    Can you please explain how can I separate the different vat values in a variable?Because the names of the fields will be the same and I dont find easier way to separate them.
    Yes, this is the wrong category. This is PHP, JavaScript is where you should have posted it.

    I went to the link you posted, and realized this was in a loop. I can't quite figure out how it works in the loop, so unfortunately I don't know what to say. You would have better luck in the JavaScript form, I'm not sure if you should just repost this in the JavaScript form or if you should ask a mod to move the thread.

    Anyone else know?
    For programming information, visit irnsystems.com
    Also check out Points2Survey and earn items.

  • #6
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Moving from PHP forum to Javascript forum.
    The client developers will be able to give you a lot better idea of what to do than us (well, better than myself at least :P)

  • #7
    New Coder
    Join Date
    Mar 2011
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thx for your time mvmacd. Im also dealing with the same problem and could not find how this code works in a loop.May be due to less knowledge of js.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •