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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Help needed:Auto calculate total from rows added & add serv. charge to get grandtotal

    Hi, I'm trying to add the total number of costs depending on the rows added to return the subtotal then later add the service charge which gives the total grand amount.

    I also need to add the item number when a new row is added.

    Can any1 help?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    
    <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);
    			}
    		}
    
    
    </script>
    
    </head>
    <body >
    <form action="#" id="calcForm" method="post">
                <table border="0" width="680" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="60" align="left" valign="top"><b>Item No</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="290" align="left" valign="top"><b>Description</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="210" align="left" valign="top"><b>Part No.</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="50" align="left" valign="top"><b>QTY</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="63" align="left" valign="top"><b>Cost</b></td>
                    </tr>
                </table>
                <table id="parts" border="0" width="680" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="60" align="left" valign="top"><INPUT type="checkbox" name="chk"/>&nbsp;<b>1</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="290" align="left" valign="top">
                            <input type="text" name="partdesc[]" size="40" value="<?=$info['partdesc'][$x]?>">
                        </td>
                        <td width="3">&nbsp;</td>
                        <td width="210" align="left" valign="top">
                            <input type="text" name="partno[]" size="30" value="<?=$info['partno'][$x]?>">
                        </td>
                        <td width="3">&nbsp;</td>
                        <td width="50" align="left" valign="top">
                            <input type="text" name="qty[]" size="2" value="<?=$info['qty'][$x]?>">
                        </td>
                        <td width="3">&nbsp;</td>
                        <td width="63" align="left" valign="top">
                            <input type="text" name="cost[]" size="4" value="<?=$info['cost'][$x]?>">
                        </td>
                    </tr>
                </table>
                <table id="parts" border="0" width="680" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="60" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="290" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="210" align="left" valign="top"><b>Sub Total</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="50" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="63" align="left" valign="top">
                            <input type="text" name="subtotal" size="4" value="<?=$info['subtotal']?>">
                        </td>
                    </tr>
                    <tr>
                        <td width="60" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="290" align="left" valign="top"><INPUT type="button" value="Add Row" onclick="addRow('parts')" /><INPUT type="button" value="Delete Row" onclick="deleteRow('parts')" /></td>
                        <td width="3">&nbsp;</td>
                        <td width="210" align="left" valign="top"><b>Service Charge</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="50" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="63" align="left" valign="top">
                            <input type="text" name="charge" size="4" value="<?=$info['charge']?>">
                        </td>
                    </tr>
                    <tr>
                        <td width="60" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="290" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="210" align="left" valign="top"><b>Grand Total</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="50" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="63" align="left" valign="top">
                            <input type="text" name="gtotal" size="4" value="<?=$info['gtotal']?>">
                        </td>
                    </tr>
                </table>
    
    </form>
    </body>
    </html>
    Last edited by bloodfire; 06-15-2010 at 02:02 AM.

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    366
    Thanks
    9
    Thanked 53 Times in 52 Posts
    Hi Bloodfire,

    Hi, I'm trying to add the total number of costs depending on the rows added to return the subtotal then later add the service charge which gives the total grand amount.
    First steps,
    For case of no row addition nor deletion, simply try placing onchange event handler to the "Part No" and "QTY" input boxes; something like onchange="update_cost()". It will update item's "Cost", "SubTotal", and "GrandTotal" input boxes. This will require ID of those 3 input boxes.

    In case of adding new row or deletion, update_cost() will be called as the last step of clicking add/ delete button just to update the "SubTotal" and "GrandTotal".

    Next step,
    I think you need ajax to get every new values of "Item No", "Description", "Part No.", Cost/Qty...
    Last edited by hdewantara; 06-15-2010 at 07:59 AM.

  • #3
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hdewantara,

    Thank you for your reply. However, I have close to nil knowledge on Javascript. I got the addrow javascript from the internet from a dude who provided for free. I only display part of my work from the actual 1 so i just copy n paste the relevant section of the work here to let those who can help to understand wat i need. If some1 could provide a simple sample of such work, and I might able to continue the rest. So far wat i have found in this forum are just direct retrieve of inputs from required number of text boxes. But I think i need something that can retrieve an array of cost values depending on number of rows added. which will addup together and display in the subtotal. From the subtotal will add up withe the input value of service charge to give the grandtotal. I need the subtotal n grandtotal to be totalup automatically without using button or next page process.. which i think the onchange will be used here.

    Any1 able to help me on starting up to retrieve array of cost values?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by bloodfire View Post
    However, I have close to nil knowledge on Javascript. ....Any1 able to help me on starting up to retrieve array of cost values?
    Presumably you would not attempt to service or repair a machine or appliance without any experience or understanding of how it worked.

    My advice would be to pay a professional to do this as it is obviously a commercial application. If you have nil knowledge of Javascript and AJAX I see little hope of you being able to accomplish this yourself.


    "To get back my youth I would do anything in the world, except take exercise, get up early, or be respectable."- Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)

  • #5
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Meaning to say such task can only be done by professional? I'm only need it as a simple task for my work. I bet a lot of ppl requires such simple script. I'm doing for the sharing. Probably you think it too professionally.

    Anyway, I manage to search and come up with the following... however.. i think the inserting array is not working. Kindly refer the following codes:-

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    
    <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);
    			}
    		}
    
    
    </script>
    
       <script>
            var array = new Array();
            
            function addcost(val){
                array[array.length]=val;
            }
            
            function showsub() {
                var sub=0;
                for(i=0; i < array.length; i++) {
                    sub += array[i];
                }
                alert('The sub total values is ' + sub + '.');
            }
        </script>
    </head>
    <body >
    <form action="#" id="calcForm" name="calcForm" method="post">
                <table border="0" width="680" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="60" align="left" valign="top"><b>Item No</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="290" align="left" valign="top"><b>Description</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="210" align="left" valign="top"><b>Part No.</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="50" align="left" valign="top"><b>QTY</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="63" align="left" valign="top"><b>Cost</b></td>
                    </tr>
                </table>
                <table id="parts" border="0" width="680" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="60" align="left" valign="top"><INPUT type="checkbox" name="chk"/>&nbsp;<b>1</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="290" align="left" valign="top">
                            <input type="text" name="partdesc[]" size="40" value="<?=$info['partdesc']?>">
                        </td>
                        <td width="3">&nbsp;</td>
                        <td width="210" align="left" valign="top">
                            <input type="text" name="partno[]" size="30" value="<?=$info['partno']?>">
                        </td>
                        <td width="3">&nbsp;</td>
                        <td width="50" align="left" valign="top">
                            <input type="text" name="qty[]" size="2" value="<?=$info['qty']?>">
                        </td>
                        <td width="3">&nbsp;</td>
                        <td width="63" align="left" valign="top">
                            <input type="text" name="cost" size="4" value="<?=$info['cost']?>"  onChange="addcost(this.calcForm.cost.value);">
                        </td>
                    </tr>
                </table>
                <table id="parts" border="0" width="680" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="60" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="290" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="210" align="left" valign="top"><b>Sub Total</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="50" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="63" align="left" valign="top">
                            <input type="text" name="subtotal" size="4" value="<?=$info['subtotal']?>">
                        </td>
                    </tr>
                    <tr>
                        <td width="60" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="290" align="left" valign="top"><INPUT type="button" value="Add Row" onclick="addRow('parts')" /><INPUT type="button" value="Delete Row" onclick="deleteRow('parts')" /></td>
                        <td width="3">&nbsp;</td>
                        <td width="210" align="left" valign="top"><b>Service Charge</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="50" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="63" align="left" valign="top">
                            <input type="text" name="charge" size="4" value="<?=$info['charge']?>">
                        </td>
                    </tr>
                    <tr>
                        <td width="60" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="290" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="210" align="left" valign="top"><b>Grand Total</b></td>
                        <td width="3">&nbsp;</td>
                        <td width="50" align="left" valign="top">&nbsp;</td>
                        <td width="3">&nbsp;</td>
                        <td width="63" align="left" valign="top">
                            <input type="text" name="gtotal" size="4" value="<?=$info['gtotal']?>"><input type="button" value="Total Sub" onClick="showsub();">
                        </td>
                    </tr>
                </table>
    
    </form>
    </body>
    </html>
    Where did i go wrong? Help is much appreciated.


  •  

    Posting Permissions

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