niralsoni & Philip, thanks for the help.
Based on the code, I have some questions that I don't understand, can kindly advice? Thanks.
1. The codes in addInput, can kindly explain what actually each line means? Not very good in js but I tried to put the comments, not sure is it what I understand.
Code:
function addInput() {
var tbl = document.getElementById('tblAddress'); //Get the id of the table
var lastRow = tbl.rows.length; //Number of current rows
var row = tbl.rows[lastRow-1].cloneNode(true); //Clone the previous row
tbl.tBodies[0].appendChild(row); //????
var txts = row.getElementsByTagName('input'); //Get all the tag name with input
//For each row, set the value of each textbox to empty
for(var i = 0; i < txts.length; i++) {
if(txts[i].type == "text") {
txts[i].value = "";
}
}
}
2. When user click add button, a new row will appear and there will be a remove button inside the last column beside totalprice textbox.
I have the Remove function but I am not sure how to append inside the new addInput function.
Below code is my previous addInput function:
Code:
var cell6 = row.insertCell(6);
var el = document.createElement('input');
el.type='text';
el.name='totalprice[]';
el.size='15';
cell6.appendChild(el);
el = document.createElement('input');
el.type ='button';
el.value='Remove';
el.onmouseup=function(){ Remove(this); }
cell6.appendChild(el);
Code:
function Remove(obj){
while (obj.parentNode){
if (obj.nodeName.toUpperCase()=='TR'){
break;
}
obj=obj.parentNode;
}
obj.parentNode.removeChild(obj);
return;
}
3. After getting the grandtotal, I have another 3 fields but I am not able to get point b and c results, those highlighted in red are the codes that I added:
a) GST -> using grandtotal * 0.07 (I am able to get this)
b) Handling fees -> user will have to input a fee in the textbox
c) Total -> This will be the grandtotal + GST + handling fees
Code:
<html>
<body>
<script type="text/javascript">
function addInput() {
var tbl = document.getElementById('tblAddress');
var lastRow = tbl.rows.length;
var row = tbl.rows[lastRow-1].cloneNode(true);
tbl.tBodies[0].appendChild(row);
var txts = row.getElementsByTagName('input');
for(var i = 0; i < txts.length; i++) {
if(txts[i].type == "text") {
txts[i].value = "";
}
}
}
function getTotal() {
var grandtotal =0;
var gst = 0;
var total = 0;
var quantity = document.getElementsByName("qty[]");
var unitprice = document.getElementsByName("unitprice[]");
var totalprice = document.getElementsByName("totalprice[]");
var handling = document.getElementsByName("handling");
var h = Math.abs(Number(handling.value)) || 0;
h = h.toFixed(2);
handling.value = h;
for(var i = 0; i < quantity.length; i++) {
var q = Math.abs(Number(quantity[i].value)) || 0; // block NaN entries or negative values
q = Math.floor(q); // make integer
quantity[i].value = q; // write it back to the field
var up = Math.abs(Number(unitprice[i].value)) || 0;
up = up.toFixed(2); // for display
if (up != 0) {unitprice[i].value = up;}
else {unitprice[i].value = "";} // blank out 0 price
up = Number(up); // back to a number;
var itemprice = q * up;
grandtotal += itemprice;
gst = grandtotal * 0.07;
total = gst + grandtotal + h;
totalprice[i].value = itemprice.toFixed(2);
document.getElementById("grdtot").value = grandtotal.toFixed(2);
document.getElementById("gst").value = gst.toFixed(2);
document.getElementById("total").value = total.toFixed(2);
}
}
</script>
<form id="myform">
<table border="1" id="tblAddress">
<tr>
<td><strong>Description</strong></td>
<td><strong>Qty</strong></td>
<td><strong>Unit Price</strong></td>
<td><strong>Total Price</strong></td>
</tr>
<tr>
<td><input type="text" name="desc[]" size="40"></td>
<td><input type="text" name="qty[]" size="4" onblur="getTotal()"></td>
<td><input type="text" name="unitprice[]" size="12" onblur="getTotal()"></td>
<td><input type="text" name="totalprice[]" size="12" id="totalprice" readonly></td>
</tr>
</table>
<input type="button" value="Add" onClick="addInput();">
      <strong>Grand Total </strong><input type = "text" id = "grdtot" size = "12" readonly><br>
<strong>GST </strong><input type = "text" id = "gst" size = "12" readonly><br>
<strong>Handling Fee </strong><input type = "text" name = "handling" size = "12" onblur="getTotal()"><br>
<strong>Total </strong><input type = "text" id = "total" size = "12" readonly><br>
</form>
</body>
</html>
Before you post, read our: 
