Update value of HTML when input value changes

Question

I am trying to update a total when the value of one of the factors changes. I have created a jsFiddleand provided a comment on it (line 16). This is probably the easiest place to see the issue.

It's simple sums, so I have a table that looks something like this.

Row 1  | 100 | 5 |
Row 2  | 200 | 10 |
Totals | 300 | 15 |

Table cells in Row 1 and Row 2 contain text fields. Table cells in the total row contain html. The id's and names of the div's / inputs are auto generated (please see jsFiddle link for example).

Everything works fine the first time I change the input amounts, but I am having a hard time setting the value of the original element to the new sum. When I update the field a second time, the calculation contemplates the original value - which throws my sums off. I have tried both the jQuery and javascript methods and have also tried with a specific id (not $(this)) all to no avail. I am new to javascript so am probably missing something simple.

My javascript looks like this

window.formTable = $('#def-inv-table');
$('input.form-text').change(function() {
  var currentId      = $(this).attr('id');
  var orgValue       = this.getAttribute('value');
  var newValue       = this.value;
  var changeAmount   = newValue - orgValue;
  var pieces         = currentId.split(/\s*\-\s*/g);
  var key            = pieces[1];
  var orgTotalString = window.formTable.find('#total-' + pieces[2]).html();
  var orgTotal       = Number(orgTotalString.replace(/[^0-9\.]+/g,""));
  var newTotal       = orgTotal + changeAmount;

  window.formTable.find('#total-' + pieces[2]).css("background", "blue");
  window.formTable.find('#total-' + pieces[2]).html(newTotal);

//Here is my problem. This is not updating. I have tried the javascript way
//with document.getElementbyId and the jQuery way. Neither sets the value.
  $(this).val(newValue);
  var testVal = $(this).val();
  //alert(testVal);
});

Please let me know if you want me to paste the html. I am leaving it out since it is in jsFiddle.

ADDING HTML

<form name="test-form" id="test-form">
  <div id="def-inv-table">
    <table>
      <tr>
        <td>
          <input type="text" id="no-413-invreturned" name="investments[413][invreturned]" value="3000.00" class="form-text">
        </td>
        <td>
          <input type="text" id="no-413-commreturned" name="investments[413][commreturned]" value="23.42" class="form-text">
        </td>
      </tr>

      <tr>
        <td>
          <input type="text" id="no-414-invreturned" name="investments[414][invreturned]" value="1000.00" class="form-text">
        </td>
        <td>
          <input type="text" id="no-414-commreturned" name="investments[414][commreturned]" value="15.89" class="form-text">
        </td>
      </tr>
      <tr>
        <td id="total-invreturned">4,000.00</td>
        <td id="total-commreturned">39.31</td>
      </tr>
    </table>
  </div>
<form>

You might want to include the HTML . . . jsFiddle gets blocked by some firewalls. — talemyn
– talemyn, Commented Mar 12, 2013 at 16:02
you use here window.formTable.find('#total-' + pieces[2]).html(newTotal); with .html method. Try using only .val() method calls — user1236048
– user1236048, Commented Mar 12, 2013 at 16:03
Sorry, there was an error in my explanation. I have edited the description. The total row contains html, not inputs. — PeterThompson
– PeterThompson, Commented Mar 12, 2013 at 16:04
@PeterThompson - the script is acting very weird - is it normal behaviour to update all the columns when changing one value on that row? Do you need a normal table which update the total values? — user1236048
– user1236048, Commented Mar 12, 2013 at 16:06
alex.dominte - the script only updates the total for that column. So if any value in column 1 changes, then the total row updates (same for column 2) I have checked jsFiddle and this is working as expected. The only problem I see (and I might be missing something) is that the sum is not correct when I change a value for the second time. — PeterThompson
– PeterThompson, Commented Mar 12, 2013 at 16:12

user1236048 · Accepted Answer · 2013-03-12 16:23:40Z

3

Try this: http://jsfiddle.net/dQKXt/86/

$('.form-text').change(function() {
    var columnIndex = $(this).parent().index() + 1;
    var sum = 0;
    $('tr td:nth-child(' + columnIndex + ')').find('input').each(function() {
        var floatValue = parseFloat($(this).val());
        $(this).val(floatValue.toFixed(2));
        sum += floatValue;        
    });    

    // here format your sum with , . etc to be the same as 4,000.00
    $('tr td:nth-child(' + columnIndex + '):last').html(sum.toFixed(2));

});

Assuming you want a normal table with sum row

answered Mar 12, 2013 at 16:23

user1236048

5,6327 gold badges53 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PeterThompson Over a year ago

alex.dominte - thank you for the help. It is doing exactly what I needed. Please also let me know if I need to do anything other than check your answer to finish off this question. Now I just need to study your code to see what I should have done in the beginning.

user1236048 Over a year ago

@PeterThompson - your welcome. yes, accepting an aswers should do the job. you let know for the others your problem was fixed

Collectives™ on Stack Overflow

Update value of HTML when input value changes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related