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>
Member Avatar for diafol

This is javascript - perhaps you should move it to the javascript/dhtml/ajax forum.

Thx for ur suggestion ardav.I dont know how to move a thread, but I have started same in js forum.

Member Avatar for diafol

OK. Let mod know through Flag Bad Post

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.