CODEWITHSUNDEEP
javascript
Brian Ramsey
Brian Ramsey

Reputation: 850

inline calculation on dynamic rows

I'm not using jQuery...

I am trying to have some totals update onChange but doesn't seem to be working as its supposed to on the box... I'm only new to JavaScript so please be gentle.

I would like the Total column to be dynamically calculated onchange of the html input values. I am looking for total to display and update in real time, Qty * Cost.

<script type="text/javascript">
        function addRow(tableID) {

          /* bunch of other stuff (unimportant) */

                var cell3 = row.insertCell(3);
            var element3 = document.createElement("input");
            element3.type = 'text';
            element3.name = 'Qty' + rowCount;
            element3.onChange = function () {
                calcTotal(this)
            };
            cell3.appendChild(element3);

            var cell4 = row.insertCell(4);
            var element4 = document.createElement("input");
            element4.type = 'text';
            element4.name = 'Cost' + rowCount;
            element4.onChange = function () {
                calcTotal(this)
            };
            cell4.appendChild(element4);

            var cell5 = row.insertCell(5);
            var element5 = document.createElement("input");
            element5.type = 'text';
            element5.disabled = true;
            element5.name = 'Total' + rowCount;
            cell5.appendChild(element5);
        }

        function calcTotal(x) {

            var myRow = x.parentNode.parentNode;

            return alert(myRow);

            var c3 = myRow.cells[3];
            var c4 = myRow.cells[4];

            if (c3 && c4) {
                element5.value = c3 * c4;
            }
        }
    </script>

The issue I am facing is 

                element3.onChange = function () {
                calcTotal(this)
            };

Doesn;t actually insert the onChange into the html output so my thinking is it cant actually do anything while i am altering the input in the html side.

Output:

<td><input type="text" name="Qty1"></td>

Any input would be much appreciated.

JS Fiddle is here: https://jsfiddle.net/brianramsey/hhLm4d8h/

Upvotes: 0

Views: 674

Answers (1)

sinisake
sinisake

Reputation: 11328

You can use onkeyup event for input text fields.

  element3.onkeyup = function () {
                    calcTotal(this)
                }

Also, to get desired input fields values:

    var c3 = parseInt(myRow.cells[3].firstChild.value);
    var c4 = parseInt(myRow.cells[4].firstChild.value);

And, to avoid problem with undefined element5 in the time when you call calcTotal() function:

 function calcTotal(x) {

                var myRow = x.parentNode.parentNode;



                var c3 = parseInt(myRow.cells[3].firstChild.value);
                var c4 = parseInt(myRow.cells[4].firstChild.value);


            if(c3&&c4)
                   myRow.cells[5].firstChild.value = c3 * c4;


            }

Demo: https://jsfiddle.net/hhLm4d8h/16/

Upvotes: 1

Related Questions