Question

This is a form_for in my Rails view:

<div class="field">
  <%= f.label :num1 %><br />
  <%= f.text_field :num1 %>
  <%= f.label :num2 %><br />
  <%= f.text_field :num2 %>
  <%= f.label :sum %><br />
  <%= f.text_field :sum %>
</div>

I would like to make it so that, when the user inputs numbers into the first two fields, the third field automatically shows the sum of the two numbers, but the user can manually change the third field. I’m not sure how I could do this, maybe with some Javascript?

Answer 1

It’s pretty simple with jQuery:

$('#num1').change(function() {
    var one = this.val();
    var two = $('#num2').val();
    $('#sum').val(one + two);
});
$('#num2').change(function() {
    var one = $('#num1').val();
    var two = this.val();
    $('#sum').val(one + two);
});

Done.