below form calculates total multiplying price , quantity values using javascript , shows value in total 'input box' automatically.
<html> <script> function calculate() { var mybox1 = document.getelementbyid('qty').value; var mybox2 = document.getelementbyid('price').value; var myresult1 = mybox1 * mybox2; total.value = myresult1; } </script> <body> <p> <table id="datatable" class="form" border="1"> <tbody> <tr> <p> <td> <label>quantity</label> <input type="text" required="required" name="qty" id="qty" oninput="calculate()"> </td> <td> <label for="price">price</label> <input type="text" required="required" class="small" name="price" id="price" oninput="calculate()"> </td> <td> <label for="total">total</label> <input type="text" required="required" class="small" name="total" id="total"> </td> <td> </td> </p> </tr> </tbody> </table> </body> </html> now added 'add/remove' option (using javascript) shown below adds/removes rows form , still want calculation take place each individual row previously. please me out new this.
<html> <script> function addrow(tableid) { var table = document.getelementbyid(tableid); var rowcount = table.rows.length; if(rowcount < 4){ // 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 4."); } } 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--; } } } function calculate() { var mybox1 = document.getelementbyid('qty').value; var mybox2 = document.getelementbyid('price').value; var myresult1 = mybox1 * mybox2; total.value = myresult1; } </script> <body> <p> <input type="button" value="add" onclick="addrow('datatable')" /> <input type="button" value="remove" onclick="deleterow('datatable')" /> <table id="datatable" class="form" border="1"> <tbody> <tr> <p> <td> <label>quantity</label> <input type="text" required="required" name="qty" id="qty" oninput="calculate()"> </td> <td> <label for="price">price</label> <input type="text" required="required" class="small" name="price" id="price" oninput="calculate()"> </td> <td> <label for="total">total</label> <input type="text" required="required" class="small" name="total" id="total"> </td> </p> </tr> </tbody> </table </body> </html> p.s: though able find 2 posts similar one, unable implement solutions due limited knowledge of javascript. created post after trying in vain find solution past 1 week or so.
this hard achieve pure java-script possible. recommended learn jquery and/or angularjs make life easier.
basically need add rows , give them unique id, use each cell calculate method own row id.
the new html looks this: (notice i've removed id cells cause use 'name' property) (only 1 unique id allowed on page)
<input type="button" value="add" onclick="addrow('datatable')" /> <input type="button" value="remove" onclick="deleterow('datatable')" /> <table id="datatable" class="form" border="1"> <tbody> <tr id='row_0'> <p> <td> <label>quantity</label> <input type="text" required="required" name="qty" oninput="calculate('row_0')"> </td> <td> <label for="price">price</label> <input type="text" required="required" class="small" name="price" oninput="calculate('row_0')"> </td> <td> <label for="total">total</label> <input type="text" required="required" class="small" name="total"> </td> </p> </tr> </tbody> </table> js:
function addrow(tableid) { var table = document.getelementbyid(tableid); var rowcount = table.rows.length; if (rowcount < 4) { // limit user creating fields more limits var row = table.insertrow(rowcount); var colcount = table.rows[0].cells.length; row.id = 'row_'+rowcount; (var = 0; < colcount; i++) { var newcell = row.insertcell(i); newcell.outerhtml = table.rows[0].cells[i].outerhtml; } var listitems= row.getelementsbytagname("input") (i=0; i<listitems.length; i++) { listitems[i].setattribute("oninput", "calculate('"+row.id+"')"); } } else { alert("maximum passenger per ticket 4."); } } function deleterow(tableid) { var table = document.getelementbyid(tableid); var rowcount = table.rows.length; (var = 0; < 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--; } } } function calculate(elementid) { var mainrow = document.getelementbyid(elementid); var mybox1 = mainrow.queryselectorall('[name=qty]')[0].value; var mybox2 = mainrow.queryselectorall('[name=price]')[0].value; var total = mainrow.queryselectorall('[name=total]')[0]; var myresult1 = mybox1 * mybox2; total.value = myresult1; } ps: function queryselector not supported on older browsers. (i've tested on chrome)
Comments
Post a Comment