How to use jquery onchange to update input field?

Question

How do you use the jquery onchange function to update an input field so that it keeps a running total?

e.g. I have the following dropdown list options:

<select name="select" id="set1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select name="select" id="set2">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<input type="text" name="total" id="total" value="" />

When a user select an option from the two dropdowns above, I need the total of the two selected options to be displayed in the input field. This would need to dynamically change each time a different option was selected. How can you achieve this with jquery?

Eric Lambrecht · Accepted Answer · 2015-02-26 15:57:01Z

1

You could do the following:

$('#set1, #set2').on('change', function (e) {
  var first = $('#set1').val();
  var second = $('#set2').val();
  $('#total').val( parseInt(first) + parseInt(second) );
});

Is this what you want? JSFiddle (Demo)

answered Feb 26, 2015 at 15:57

Eric Lambrecht

537 bronze badges

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

2 Comments

Jeremy Thille Over a year ago

What if there are three or four 'select'? Yeah I know, OP did not ask for this, but if you add one select, your code breaks. It's not robust enough.

Eric Lambrecht Over a year ago

As you already pointed it out, the OP didn't ask for this. You could easily replace the selector for this task. What if there are three or four selects on a page, but you only want these two specific selects to be recognized? Then your code breaks. So what's the point of your comment? "Robustness" is relative.

Jeremy Thille · Accepted Answer · 2015-02-26 22:06:53Z

0

Works with any number of 'select' :

$select = $('select.numberSelect');

$select.on('change', function(){
  
  var total = 0;
  
  $select.each(function(e){
    total += parseInt($(this).val()); // or parseInt(e.currentTarget.value)
  })
  
  $('#total').val(total);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='numberSelect'>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select class='numberSelect'>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>


<select class='numberSelect'>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<input type="text" id="total" value="3" />

Edit : Removed a lot of useless stuff (names, IDs, value="", ...) and added a third select for demonstration purposes.

Edit 2 : added a class to target the specific 'select' elements, and not others in the DOM.

edited Feb 26, 2015 at 22:06

answered Feb 26, 2015 at 15:51

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

4 Comments

adam78 Over a year ago

This looks like a good solution. But what if I have other selects on the same page which I wish to exclude? Whats the jquery syntax to iterate through selects of a specific class type - i.e. I could add a class to all the selects that needs totaling and use that as an identifier to total the selects?

Jeremy Thille Over a year ago

I have updated my answer and added a class, so other 'select' won't be affected.

adam78 Over a year ago

works perfectly. One more question, lets say instead of using a class all my select that I wish to total have an id prefix of 'set' e.g. 'set_1', 'set_2', 'set_3'. So instead of using a class how would you do the same i.e. total all selects which have an id prefix of 'set'? Is the following correct because it doesn't seem to work: $select = $('select[id^="set_"]')

Jeremy Thille Over a year ago

I would discourage this, as that's the point of having classes. It's easier and cleaner. However, if for some reason, you really want to use partial IDs, you got the right syntax and it should work. See jsfiddle.net/Jeremythille/psr6vqck Note that you can have the same class(es) and a different ID for all.

ntzm · Accepted Answer · 2015-02-26 15:49:50Z

0

$('[name=select]').change(function () {
    $('#total').val(Number($('#set1').val()) + Number($('#set2').val()));
});

This gets the currently selected values from #set1 and #set2, converts them to numbers, then sets the value of the #total element.

To convert strings to numbers, you can use the Number() method like I have, for readability. You can also do $('#set1').val() - 0, which isn't very understandable, but is significantly faster. To see a comparison of all the methods of converting string to number and their performance, check out: http://jsperf.com/convert-string-to-number-techniques/2

answered Feb 26, 2015 at 15:49

ntzm

4,8692 gold badges34 silver badges39 bronze badges

Comments

Danny · Accepted Answer · 2015-02-26 15:53:27Z

0

Works with your html. It could be improved if you have a dynamic # of selects.

http://jsfiddle.net/591uag9h/

$(document).on("change","#set1,#set2", function() {
    var sum = parseInt($("#set1").val()) + parseInt($("#set2").val());
    $("#total").val(sum);
});

answered Feb 26, 2015 at 15:53

Danny

7,5379 gold badges49 silver badges71 bronze badges

2 Comments

Jeremy Thille Over a year ago

Same question as below. What if there are three or four 'select'? Yeah I know, OP did not ask for this, but if you add one select, your code breaks. It's not robust enough.

Danny Over a year ago

@JeremyThille He should use your answers then. I was answering the question at hand, the asker can learn from all of the different ways of implementing the solution.

Collectives™ on Stack Overflow

How to use jquery onchange to update input field?

4 Answers 4

2 Comments

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related