how to find discount from total sum using javascript

Question

I have a table that a user can dynamically add a row as needed. And as you can see underneath the table that is a sum of the last column's value which is dynamically added. I need to add two text boxes above the sum from that one textbox(name as discount) take input(as a number) from user and the second textbox(name as finalsum) display the output as the value(finalsum=sum-discount). and if the user does not give any input value then the discount should be initially zero. and the finalsum should be equal to sum

if you want more info let me know thank you! Any help will be greatly appreciated :)

 <html> <head> <title>Add/Remove dynamic rows in HTML table</title> <script language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; if (rowCount < 4) { // limit the user from creating fields more than your limits var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; row.id = "row_" + rowCount; for (var i = 0; i < colCount; i++) { var newcell = row.insertCell(i); newcell.outerHTML = table.rows[0].cells[i].outerHTML; } var listitems = row.querySelectorAll("input, select"); for (i = 0; i < listitems.length; i++) { listitems[i].setAttribute("oninput", "calculate('" + row.id + "')"); } } else { alert("Maximum Passenger per ticket is 4."); } } function calculate(elementID) { var mainRow = document.getElementById(elementID); var myBox1 = mainRow.querySelectorAll("[name=qty]")[0].value; var myBox3 = mainRow.querySelectorAll("[name^=sel]")[0].value; var total = mainRow.querySelectorAll("[name=total]")[0]; var myResult1 = myBox1 * myBox3; total.value = myResult1; // calculate the totale of every total var sumContainer = document.getElementById("totalOfTotals"); var totalContainers = document.querySelectorAll("[name=total]"), i; var sumValue = 0; for (i = 0; i < totalContainers.length; ++i) { sumValue += parseInt(totalContainers[i].value); } sumContainer.textContent = sumValue; } </script> </head> <body> <input type="button" value="Add" onClick="addRow('dataTable')" /> <table id="dataTable" class="form" border="1"> <tbody> <tr id="row_0"> <p> <td> <label>Quantity</label> <input type="number" required="required" name="qty" oninput="calculate('row_0')" /> </td> <td> <label for="sel">Price</label> <select name="sel" id="sel" oninput="calculate('row_0')" required> <option value="" disabled selected>Choose your option</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> <td> <label for="total">Total</label> <input type="text" required="required" class="small" name="total" /> </td> </p> </tr> </tbody> </table> <div> <tr> <span>Sum</span> <span id="totalOfTotals">0</span> </tr> </div> </body> </html>

Answer 1

Solution Here !!!

 <html> <head> <title>Add/Remove dynamic rows in HTML table</title> <script language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; if (rowCount < 4) { // limit the user from creating fields more than your limits var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; row.id = "row_" + rowCount; for (var i = 0; i < colCount; i++) { var newcell = row.insertCell(i); newcell.outerHTML = table.rows[0].cells[i].outerHTML; } var listitems = row.querySelectorAll("input, select"); for (i = 0; i < listitems.length; i++) { listitems[i].setAttribute("oninput", "calculate('" + row.id + "')"); } } else { alert("Maximum Passenger per ticket is 4."); } } function calculate(elementID) { var mainRow = document.getElementById(elementID); var myBox1 = mainRow.querySelectorAll("[name=qty]")[0].value; var myBox3 = mainRow.querySelectorAll("[name^=sel]")[0].value; var myBox4 = mainRow.querySelectorAll("[name=discount]")[0].value; var total = mainRow.querySelectorAll("[name=total]")[0]; var myResult1 = myBox1 * myBox3; total.value = myResult1-myBox4; // calculate the totale of every total var sumContainer = document.getElementById("totalOfTotals"); var totalContainers = document.querySelectorAll("[name=total]"), i; var sumValue = 0; for (i = 0; i < totalContainers.length; ++i) { sumValue += parseInt(totalContainers[i].value); } sumContainer.textContent = sumValue; } </script> </head> <body> <input type="button" value="Add" onClick="addRow('dataTable')" /> <table id="dataTable" class="form" border="1"> <tbody> <tr id="row_0"> <p> <td> <label>Quantity</label> <input type="number" required="required" name="qty" oninput="calculate('row_0')" /> </td> <td> <label for="sel">Price</label> <select name="sel" id="sel" oninput="calculate('row_0')" required> <option value="" disabled selected>Choose your option</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> <td> <label for="discount">Discount</label> <input type="text" required="required" class="small" name="discount" 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> <div> <tr> <span>Sum</span> <span id="totalOfTotals">0</span> </tr> </div> </body> </html>

how to find discount from total sum using javascript

Question

1 answers

solution1
0 ACCPTED 2020-10-15 09:37:17

how to find discount from total sum using javascript

Question

1 answers

solution1 0 ACCPTED 2020-10-15 09:37:17

solution1
0 ACCPTED 2020-10-15 09:37:17