检查选择字段和输入字段

Question

I'm trying to do the following:

I have 1 select field and 1 input field. When these are filled out the sum of both has to be written to the span .result. (Immediately! So not off focus from input field etc.)

I tried to use:

.on('click'
.on('change'
.on('blur'

and so on...

It only works on either input or selectfield but not on both at the same time.

To make this situation a bit more clear I added a fiddle

Answer 1

Use input and select events.

$('input, select').on('input select', function() {

1. input event will be fired when the value of the input is changed either by manually entering the value or by copy-paste.
2. select event will be fired on <select> when an <option> is selected.

Updated Fiddle

 $('input, select').on('input select', function() { prijs_field = $('.prijs_field').val(); btw_field = $('.btw_field').val(); $('.result').html(prijs_field * btw_field); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <input type="text" class="prijs_field"> <select class="btw_field"> <option value="21">21%</option> <option value="6">6%</option> <option value="0">0%</option> </select> <span>the result is: </span><span class="result"></span>