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() {
input
event will be fired when the value of theinput
is changed either by manually entering the value or by copy-paste.select
event will be fired on<select>
when an<option>
is selected.
$('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>