CODEWITHSUNDEEP
javascript
Rex
Rex

Reputation: 55

Perform calculations on dynamically added rows

Below form calculates the total by multiplying the price and quantity values using Javascript and shows that value in the 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 a 'Add/Remove' option (using Javascript) like shown below which adds/removes rows to the form and still want the calculation to take place for each individual row like previously. Please help me out as am new to this.

<html>
<script>
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;
        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 is 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 the user from removing all the fields
                alert("Cannot Remove all the 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 I was able to find two posts similar to this one, am unable to implement those solutions due to my limited knowledge of Javascript. Only created this post after trying in vain to find a solution for the past one week or so.

Upvotes: 1

Views: 3658

Answers (1)

Ziv Weissman
Ziv Weissman

Reputation: 4526

This is hard to achieve with pure java-script however possible. It is really recommended to learn jQuery and/or AngularJS will make your life much easier.

Basically you need to add rows and give them unique ID, then use each cell calculate method with its own row ID.

The new HTML looks like this: (notice I've removed the ID from the cells cause I will use 'name' property) (only one unique ID is 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 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.getElementsByTagName("input")
            for (i=0; i<listitems.length; i++) {
              listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");
            }
    } else {
        alert("Maximum Passenger per ticket is 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 the user from removing all the fields
                alert("Cannot Remove all the 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;

}

Working example (fiddle)

PS: the function querySelector is not supported on older browsers. (I've tested it on chrome)

Upvotes: 2

Related Questions