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=Quantity*Rate 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <script type="text/javascript" src="js/direct_invoice_table.js"> </script> <html> <head> <title>Direct Invoice</title> </head> <body leftmargin="0" topmargin="0"> <p align = "center" font='30'><input type="text" name="company_name" size="20" maxsize="20" /> <b> Invoice</b></p> <table id="Client_Details"> <tr> <th>Client Name:</th> <td><input type="text" name="client_name" size="20" maxsize="20" /></td> </tr> <tr> <th>Client Address:</th> <td><input type="text" name="address_line1" size="20" maxsize="40" /></td> </tr> <tr> <td></td> <td><input type="text" name="address_line2" size="20" maxsize="40" /></td> </tr> <tr> <th>Pin Code:</th> <td><input type="text" name="client_pin" size="7" maxsize="7" /></td> </tr> <tr> <th>City/State/Country:</th> <td><input type="text" id="client_city" size="10" maxsize="30" /></td><td>/</td> <td><input type="text" id="client_state" size="10" maxsize="20" /></td><td>/</td> <td><input type="text" id="client_country" size="10" maxsize="20" /></td> </tr> <tr> <th>Email Address:</th> <td><input type="text" name="client_city" size="10" maxsize="30" /></td> </tr> <tr> <th>TIN/PAN:</th> <td><input type="text" name="tin_or_pan" size="10" maxsize="20 " /></td> </tr> </table> <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="dynamic_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> <p align = "left" font='100'> <b>Company Name: </b> <input type="text" name="company_address_line1" size="20" maxsize="20" /> </p> <p align = "left" font='100'> <b>Company address line: </b> <input type="text" name="company_address_line2" size="20" maxsize="20" /></p> <p align = "left" font='100'> <b>Company Location: </b><input type="text" name="company_address_location" size="20" maxsize="20" /></p> </body> </html> Code (markup): *************** The below is the javascript function that i wrote function addRow() { // grab the element, i.e. the table your editing, in this we're calling it // 'mySampleTable' and it is reffered to in the table further down on the page // with a unique of id of you guessed it, 'mySampleTable' var tbl = document.getElementById('mySampleTable'); // grab how many rows are in the table var lastRow = tbl.rows.length; // if there's no header row in the table (there should be, code at least one //manually!), then iteration = lastRow + 1 var iteration = lastRow; // creates a new row var row = tbl.insertRow(lastRow); // left cell // insert a cell var cellLeft = row.insertCell(0); // here we're just using numbering the cell, like anything else you don't // have to use this, but i've kinda noticed users tend to like them var textNode = document.createTextNode(iteration); // takes what we did (create the plain text number) and appends it the cell // we created in the row we created. NEAT! cellLeft.appendChild(textNode); // right cell // another cell! var cellRight1 = row.insertCell(1); // creating an element this time, specifically an input var el = document.createElement('input'); // a data type of text el.type = 'text'; // the name of the element itemname, and because this is dynamic we also // append the row number to it, so for example if this is the eigth row // being created the text box will have the name of itemname8. super fantastic. // the exact same thing with a unique id el.id = 'itemname[]'+ iteration; // set it to size of 40. setting sizes is good. el.size = 40; // same thing as earlier, append our element to our freshly and clean cell cellRight1.appendChild(el); var cellRight2 = row.insertCell(2); var e2 = document.createElement('input'); e2.type = 'text'; e2.id = 'description[]' + iteration; e2.size = 20; e2.maxsize = 100; cellRight2.appendChild(e2); var cellRight3 = row.insertCell(3); var e3 = document.createElement('input'); e3.type = 'text'; e3.id = 'unitcost[]' + iteration; e3.size = 10; e3.maxsize = 100; cellRight3.appendChild(e3); var cellRight4 = row.insertCell(4); var e4 = document.createElement('input'); e4.type = 'text'; e4.id = 'quantity[]'+ iteration; e4.size = 4; e4.maxsize = 100; cellRight4.appendChild(e4); var cellRight5 = row.insertCell(5); var e5 = document.createElement('input'); e5.type = 'text'; e5.id = 'price[]'+ iteration; e5.size = 10; e5.maxsize = 100; cellRight5.appendChild(e5); // var cellRight7 = row.insertCell(7); // var e7 = document.createElement('input'); // e7.type = 'CHECKBOX'; // e7.id = 'cancel[]'; // cellRight7.appendChild(e7); var cellRight6 = row.insertCell(6); cellRight6.innerHTML = " <input type='button' value='Delete' size='6' onclick='removeRow(this);'/>"; e4.onclick = dynamic_onc(); } function removeRow(src) { /* src refers to the input button that was clicked. to get a reference to the containing <tr> element, get the parent of the parent (in this case case <tr>) */ var oRow = src.parentElement.parentElement; //once the row reference is obtained, delete it passing in its rowIndex document.all("mySampleTable").deleteRow(oRow.rowIndex); } function countRow() { var Rowcount = document.getElementById('mySampleTable').rows.length; document.eval_edit.count.value = Rowcount-1; } function CalculatePrice() { var Rowcount = document.getElementById('mySampleTable').rows.length; document.eval_edit.count.value = Rowcount-1; } function onc() { var a= document.getElementById('unitcost[]'); var b= document.getElementById('quantity[]'); var c = Math.ceil(a.value*b.value); alert(b); document.getElementById('price[]').value =c; } function dynamic_onc() { alert('Jay' ); e5.value =7; } function Totalcal() { var a= document.getElementById('unitcost[]'); var b= document.getElementById('quantity[]'); var c = Math.ceil(a.value*b.value); alert(b.value); document.getElementById('price[]').value =c; } Code (markup):
I didn't dissect your code too closely, but just glancing quickly it looks like you may have a variable scope issue. Try passing the row number directly to the Totalcal function. The way it looks at a glance, unitcost[] and price[] don't have any value inside the function.