multiple Input for sales system with javascript and PHP -
hi :) have dificulties in develope sales system. in system have itemname,item price,qty , total. problem every time want add new row new item entry the price won't appear in item price textbox , calculation "total" did not works too. can 1 me solved problems. here code regards, sugi
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="script.js"></script> <title>untitled document</title>enter code here </head> <body onload="setup()" > <script type="text/javascript"> function setup(){ var itemname = document.getelementbyid("item_name"); var tot = document.getelementbyid("price"); itemname.onchange = function() { var x = document.getelementbyid("item_name").selectedindex; var y = document.getelementbyid("item_name").options; tot.value = y[x].value; } } function totalall(){ var a=document.getelementbyid("price"); var b=document.getelementbyid("qty"); var c=document.getelementbyid("total"); c.value=a.value*b.value; } </script> <table width="871" height="293" border="0"> <tr> <td><form id="form1" name="form1" method="post" action=""> <p><strong>sales </strong></p> <table> <tr> <td>item name</td> <td>item price</td> <td>qty</td> <td>total</td> </tr> </table> <table id="datatable" class="form" border="1"> <tr> <td><select id="item_name"> <option value="100">usb flash drive</option> <option value="200">cd rom</option> <option value="300">2 gb ram</option> <option value="400">1 tera ram</option> <option value="500">mouse </option> </select></td> <td><label for="qty"></label> <input name="price[]" type="text" id="price" size="2" /></td> <td><input name="qty[]" type="text" id="qty" onblur="totalall()"/></td> <td><input name="total[]" type="text" id="total"/></td> </tr> </table> <table width="200" border="0"> <tr> <td><input type="button" value="add row" onclick="addrow('datatable')" /> </td> </tr> </table> </tr> </table> <p> </p> </form> </body> </html> and here code script.js
function addrow(tableid) { var table = document.getelementbyid(tableid); var rowcount = table.rows.length; if(rowcount < 20){ // limit user creating fields more limits 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; } }else{ alert("maximum passenger per ticket 20."); } } function deleterow(tableid) { 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) { // limit user removing fields alert("cannot remove passenger."); break; } table.deleterow(i); rowcount--; i--; } } }
problem dynamically generated elements. when generating new select box, text boxes elements have same id. when generating price field dynamically fields have id="price".
but according rule in dom, every element must have unique id. that's why onchange() event not working on dynamically generated rows. generate unique id work.
Comments
Post a Comment