CODEWITHSUNDEEP
javascriptjqueryhtml
Jigna Jain
Jigna Jain

Reputation: 255

Sum dynamic generated text box

I am writing an application wherein when ever user enter quantity and price it gives item total price.User can enter as many items he wants. Also I need to show subbtotal price which will be sum of all input price. I am able to calculate item price. however somehow total price is not getting displayed. I tried on chnage function which will fetch the value form total box. and then sum and dispaly it in subtotal box. I am unable to identify any error. Below is code

<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
<body>
<input type="button" value="Add Row" onclick="addRow();" />
<table id="tblGrid" style="table-layout:fixed">
            <thead>
            <tr>
                <th width="150px">Product name</th>
                <th width="150px">Package</th>
                <th width="250px">Quantity</th>
                <th width="250px">Price</th>
                <th width="250px">Total</th>
            </tr>
            </thead>
            <tbody>

            <tbody>
        </table>
Subtotal :<input type='text' id="totalPrice" name='subt' class='form-control'>      

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript">

            //add a new row to the table
            function addRow()
            {
                //add a row to the rows collection and get a reference to the newly added row
                var newRow = document.all("tblGrid").insertRow();

                //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes

                var oCell = newRow.insertCell();
                oCell.innerHTML = "<input type='text' name='t1' class='form-control'>";

                oCell = newRow.insertCell();
                oCell.innerHTML = "<input type='text' name='t2' class='form-control'>";

                oCell = newRow.insertCell();
                oCell.innerHTML = "<input type='text' name='t3' class=' one form-control'>";

                oCell = newRow.insertCell();
                oCell.innerHTML = "<input type='text' name='t4' class='two form-control'>";

                oCell = newRow.insertCell();
                oCell.innerHTML = "<input type='text' name='t5' class='three form-control' readonly> &nbsp;&nbsp;<input type='button' value='Delete' onclick='removeRow(this);'/>";         
            }

            //deletes the specified row from the table
            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("tblGrid").deleteRow(oRow.rowIndex);       
            }

        $("table").on("change", "input", function () {  //use event delegation
  var tableRow = $(this).closest("tr");  //from input find row
  var one = Number(tableRow.find(".one").val());  //get first textbox
  var two = Number(tableRow.find(".two").val());  //get second textbox
  var total = one * two;  //calculate total
  tableRow.find(".three").val(total);  //set value
});

// we used jQuery 'keyup' to trigger the computation as the user type
$('.three').on("change", "input", function () {

    // initialize the sum (total price) to zero
    var sum = 0;

    // we use jQuery each() to loop through all the textbox with 'price' class
    // and compute the sum for each loop
    $('.three').each(function() {
        sum += Number($(this).val());
    });

    // set the computed value to 'totalPrice' textbox
    $('#totalPrice').val(sum);

});
</script>
</body>
</html>

Please help!!!!

Upvotes: 0

Views: 155

Answers (3)

Anadi
Anadi

Reputation: 754

  1. Add a common class for all 'Total' textboxes. I have added a class total

    class='total three form-control'

  2. Change event for .three is not required. Please remove this.

  3. Add another function

    function UpdateTotal() {
        var sum = 0;
        $(".total").each(function () {
            sum += +$(this).val();
        });
        $('#totalPrice').val(sum);
 }

  4. Call this function from removeRow function and on table change event.

    //deletes the specified row from the table
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("tblGrid").deleteRow(oRow.rowIndex);
    UpdateTotal();
}

$("table").on("change", "input", function () {  //use event delegation
    var sum = 0;
    var tableRow = $(this).closest("tr");  //from input find row
    var one = Number(tableRow.find(".one").val());  //get first textbox
    var two = Number(tableRow.find(".two").val());  //get second textbox
    var total = one * two;  //calculate total
    tableRow.find(".three").val(total);  //set value
    UpdateTotal(); // New function
});

It works for me. Please check.

Upvotes: 0

Ryuk Lee
Ryuk Lee

Reputation: 744

Change this line

$('.three').on("change", "input", function ()

to

$('table').on("change", "input", function ()

Because inputs (class three) are elements you appended. So, you have to bind with their parent via "on"

Demo

Upvotes: 0

plonknimbuzz
plonknimbuzz

Reputation: 2664

when user manually change the input value. event change was called. but when you change input value programmatically, event change will not called. so you need to trigger change event when .three val was changed.

you can use: .change() or .trigger('change')

here the demo http://jsbin.com/moniwemixa/edit?html

Upvotes: 1

Related Questions