I would like the field amount to be updated while the user is typing in the field km. I used the .change but the field is only updated when the field loses focus, like the onfocusout event. What coudl I try in order to archive my request?

/

<label>Expense</label>
    <select id="ExpenseTypeId" name="ExpenseTypeId">
        <option value=""></option>
        <option value="1">Avance sur frais</option>
        <option value="2">Carburant voiture societ&#233;</option>
        <option value="3">Frais kilom&#233;triques</option>
    </select>
    <label id="kmtxt" class="hidden">Distance (the amount will be automatically calculated</label>
    <input type='text' id="km" class="hidden"/>
    <label id="amounttxt" >Amount</label>
    <input type='text' id="amount" />

<script>
    $('#ExpenseTypeId').change(function(){
        var selected_item = $(this).val()
        if(selected_item == "3"){
            $('#kmtxt').val("").removeClass('hidden');
            $('#km').val("").removeClass('hidden');
            $('#amount').prop('readonly', true);
        }else{
            $('#kmtxt').val(selected_item).addClass('hidden');
            $('#km').val(selected_item).addClass('hidden');
        }
    });    

    $("#km").change(function () {

        var price = Number($(this).val());
        var total = (price) * 0.25;
        $("#amount").val(total);
    });
</script>

I would like the field amount to be updated while the user is typing in the field km. I used the .change but the field is only updated when the field loses focus, like the onfocusout event. What coudl I try in order to archive my request?

https://jsfiddle/yUhtj/

<label>Expense</label>
    <select id="ExpenseTypeId" name="ExpenseTypeId">
        <option value=""></option>
        <option value="1">Avance sur frais</option>
        <option value="2">Carburant voiture societ&#233;</option>
        <option value="3">Frais kilom&#233;triques</option>
    </select>
    <label id="kmtxt" class="hidden">Distance (the amount will be automatically calculated</label>
    <input type='text' id="km" class="hidden"/>
    <label id="amounttxt" >Amount</label>
    <input type='text' id="amount" />

<script>
    $('#ExpenseTypeId').change(function(){
        var selected_item = $(this).val()
        if(selected_item == "3"){
            $('#kmtxt').val("").removeClass('hidden');
            $('#km').val("").removeClass('hidden');
            $('#amount').prop('readonly', true);
        }else{
            $('#kmtxt').val(selected_item).addClass('hidden');
            $('#km').val(selected_item).addClass('hidden');
        }
    });    

    $("#km").change(function () {

        var price = Number($(this).val());
        var total = (price) * 0.25;
        $("#amount").val(total);
    });
</script>

• javascript
• jquery

Share Improve this question Follow asked Jun 1, 2015 at 11:26 NataliaNatalia 11133 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Use keyup instead of change event with #km element

$("#km").keyup(function () {
    var price = Number($(this).val());
    var total = (price) * 0.25;
    $("#amount").val(total);
});

Don't use change, use keyboard event instead.

Change your event to keyup

$('"#km"').keyup(function(){
   var price = Number($(this).val());
   var total = (price) * 0.25;
   $("#amount").val(total);
});  

Fiddle