Computation on dynamic created text box.

[The-Eagle-Eye]

Hello friends... need help desperatelyThis is for my project workNeed Help in followings:Here i am able to add new row in a table2 with dynamically textbox successfully.Then i tried to multiply 2nd (col2) and 3rd (col3) value into 4th (col4) cell for the first row.1) but for the 2nd row onwards.... its taking the same first row value to compute the total.2) while removing last row ... i m not able to compute gTot (Net Total) appropriately.3) How can i remove perticular row... from the between?4) selected product has to be removed from appearing for the following rows.Note: No forms has been used.Answer atleast for the first two... if possible.Thanx in Advance.

<script TYPE="text/javascript">.. .var tot = 0;var gtot = 0;function insRow() { var table = document.getElementById('Table2'); var no=table.rows.length; if(no < 7) { var row=table.insertRow(no); var col1=row.insertCell(0); col1.appendChild (document.createTextNode("")); col1.innerHTML="<select name='mySelect' width='50'> <option>Select Product</option> <option> Prod1 </option> <option> Prod2 </option> <option> Prod3 </option> <option > Prod4 </option> <option> Prod5 </option> <option> Prod6 </option> </select>"; col1.width="50"; var col2=row.insertCell(1); col2.innerHTML="<Input Type='Text' id='txtUni' size='15' value='0'>"; col2.width="15"; var col3=row.insertCell(2); col3.innerHTML="<Input Type='Text' id='txtQty' size='15' value='0'>"; col3.width="15"; var col4=row.insertCell(3); col4.innerHTML="<Input Type='Text' id='txtTot' size='15' value='0' onfocus='getTotal()'>"; col4.width="15"; } }function getTotal() { tot = (document.getElementById('txtUni').value) * (document.getElementById('txtQty').value); document.getElementById('txtTot').value = tot; gtot += tot; document.getElementById('gTot').value = gtot; }function remRow() { var tbl = document.getElementById('Table2'); var lastRow = tbl.rows.length; if (lastRow > 1) { if(confirm("are you sure to remove last product?")) { tbl.deleteRow(lastRow - 1); var del = document.getElementById('txtTot').value gtot -= del; document.getElementById('gTot').value = gtot; alert("Row Deleted") } } else alert("No rows to delete") }...</SCRIPT>...<TABLE ID="Table2" BORDER="0"><TR><TH ALIGN="center" WIDTH="120">Product</TH><TH ALIGN="center" WIDTH="120">Rate/Unit</TH><TH ALIGN="center" WIDTH="120">Quantity</TH><TH ALIGN="center" WIDTH="120">Total</TH></TR></TABLE>...<TABLE ID="Table3" BORDER="0"><TR><TD><INPUT TYPE="button" ONCLICK="insRow()" VALUE="New Product" WIDTH="20"></TD><TD><INPUT TYPE="reset" ONCLICK="remRow()" VALUE="Remove Product" WIDTH="20"></TD><TD><INPUT TYPE="button" ONCLICK="addTran()" VALUE="Submit" WIDTH="20"></TD><TD><FONT TYPE="Lucida Sans" SIZE="3"> Net Total: <INPUT TYPE="text" VALUE="0" ID="gTot" SIZE="10"></FONT></TD></TR></TABLE>...

[Patrick]

1) but for the 2nd row onwards.... its taking the same first row value to compute the total.That's because when you add a product you use the same id for the inputs. You need to add an integer to that id to be able to access the values.2) while removing last row ... i m not able to compute gTot (Net Total) appropriately.Well again you need to add an integer to the ids to even be able to get into the right input and get the value. And next you'll get a problem where you can't access the input because you're doing this:tbl.deleteRow(lastRow - 1);var del = document.getElementById('txtTot').valueAfter deleting the row you want to access the input in that row you just deleted which you can't for good reasons. Just put the last line first after adding an integer to the id.3) How can i remove perticular row... from the between?In your remRow() function you have the following line:tbl.deleteRow(lastRow - 1);Simply change the parameter passed to it. So if you want to remove the second row from the bottom change it to "lastRow - 2".4) selected product has to be removed from appearing for the following rows.If you start adding multiple rows without selecting a product you won't be able to remove the product obviously. And besides you can alter the product chosen at any time so removing an option might not be that good an idea.If you want to do it: Every time a client selects a product you should have a function check if that product is already selected and if so you should change the product back and alert the client.Or: Every time a client selects a product you should have a function remove that option from the other product lists.CommentsThe way you're calculating the gtot isn't really working. Every time you click on a "Total"-input or ust tab to move through the inputs you'll add the total to the gtot even if it's already in the total sum. Instead you should have a function add the "Total"-inpus on the onfocus event, it'll be a little heavier, but it'll work properly.