Hi!!
This is some of the code I am using to add dynamic rows when user clicks the Add Row button.I want to show the calculated amount like:
line_total=qty*unit_price;
sub_total=total of line_total;
total=sub_total+tax-advance;
<script type="text/javascript">
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount<3)
{
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;
}
}
}
else
{
alert("Maximum Limit Of 3 Rows Reached");
}
}
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>
<form name="newquotation1" method="post" action="invoice_data.php" onSubmit="return validateForm(this)">
<tr>
<td><input type="button" value="Add Row" onClick="addRow('dataTable')" ></td>
<table align="center" id="dataTable" width="912">
<tr>
<td width="68">Quantity:</td>
<td width="144"><input type="text" name="qty[]" id="qty"></td>
<td width="77">Description:</td>
<td width="144"><input type="text" name="description[]" id="description"></td>
<td width="80">Unit Price:</td>
<td width="144"><input type="text" name="unit_price[]" id="unit_price"></td>
<td width="75">Line Total:</td>
<td width="144"><input type="text" name="line_total[]" id="line_total" onBlur="return line(this)" readonly""></td>
</tr>
</table>
<table align="center" width="913">
<tr>
<td width="67">Subtotal:</td>
<td width="146"><input type="text" name="subtotal" id="subtotal" readonly""></td>
<td width="75">Taxes:</td>
<td width="144"><input type="text" name="tax" id="tax"></td>
<td width="81">Advance:</td>
<td width="144"><input type="text" name="advance" id="advance"></td>
<td width="76">Total:</td>
<td width="144"><input type="text" name="total" id="total" onBlur="return tot(this)" readonly""></td>
</tr>
</table>
<table align="center">
<tr>
<td><input name="submit" type="submit" value="Submit"></td>
</tr>
</table>
</form>So far I came up with the function as follows.It works very well on the first row, but not on the other dynamically added rows.
Similarly, I dont know how I can calculate the sub_total value by adding line_total feilds altogether.Please help me out
<script type="text/javascript">
function line(elem) {
var a=document.getElementById("qty").value;
var qt=Number(a);
var b=document.getElementById("unit_price").value;
var up=Number(b);
var c=qt*up;
document.getElementById("line_total").value = c;
}
function tot(elem) {
var d=document.getElementById("subtotal").value;
var st=Number(d);
var e=document.getElementById("tax").value;
var tx=Number(e);
var f=document.getElementById("advance").value;
var ad=Number(f);
var g=(st+tx)-ad;
document.getElementById("total").value = g;
}
</script>