Check on selectfield and input field

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

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>

Leave a Reply

Your email address will not be published. Required fields are marked *