onchange for dynamically added rows — OZONE Asylum, home of the Mad Scientists

DHTML/Javascript

onchange for dynamically added rows

This page's ID: 32034

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Hi, I am new to javascript and have coded an invoice page through help from some available content on web. here is my requirement My form contains inputs "item ,rate quantity,price" in a tabular form where one can dynamically add or delete rows.And the requirement is that when Quantity is entered the Price should change to Price=QuantityRate on tab out So I have used a Javascript onchange() and this works fine for the first displayed row. but for dynamically added rows this does not happen, I am not able change the price value for dynamically added rows. Code is as below direct_invoice.html [code] </html> <table align="center" width = "75%"> <tr> <td align = "center"> <!--- very imporant to give the table an id ---> <!--- otherwise it won't know where to edit ---> <table border="1" id="mySampleTable"> <tr> <th>Item No</th> <th>Item Name</th> <th>Description</th> <th>Unit Cost</th> <th>Quantity</th> <th>Price</th> <th> <font color="RED">Delete</font></th> </tr> <tr> <td>1</td> <td><input type="text" name="itemname[]" size="40" "maxsize="100"/></td> <td><input type="text" name="description[]" size="20" " maxsize="100" /></td> <td><input type="text" id = "unitcost[]" name="unitcost[]" size="10" maxsize="100" /></td> <td><input type="text" id = "quantity[]" name="quantity[]" onchange = "onc();" size="4" maxsize="100" /></td> <td><input type="text" id = "price[]" name="price[]" size="10" maxsize="100" /></td> </tr> </table> <table id="totaltbl" align="right"> <tr> <td></td> </tr> <tr> <th>Vat %</th> <td><input type="text" name="total" size="3" maxsize="3" /></td> </tr> <tr> <th>Total</th> <td><input type="text" id = "total" name="total" size="20" maxsize="100" /></td> </tr> </table> </td> </tr> </table> <form action="save_entry.php" name="eval_edit" method="post" format="html"> <p> <input type="button" value="Add Row" onclick="addRow();" /> <input type="button" value="Calculate Total Amount" onclick="Totalcal();" /> <input type="button" value="Print" /> </p> </form> </html> [/code] my java script for dynamically adding rows works as below for each cell for newly added row the columnQuantit will be created like this Add row() [code] var cellRight4 = row.insertCell(4); var e4 = document.createElement('input'); e4.type = 'text'; e4.name = 'quantity[]'; e4.id = 'quantity[]'; e4.size = 4; e4.maxsize = 100; cellRight4.appendChild(e4); [/code] [b]calculate price:[/b] [code] function onc() { var a= document.getElementById('unitcost[]'); var b= document.getElementById('quantity[]'); var c = Math.ceil(a.valueb.value); alert(b); document.getElementById('price[]').value =c; } [/code] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu