setting value of input field via jquery doesn't always refresh that field

Question

I'm having problems calculating and displaying a number in an input field via jquery. considering I have two input fields, the first one accepts a number and the second one displays this number + 100. works as it should do, as long as you enter the number in the first field via the keyboard. changing the number with the little arrow buttons on the right side of the input field however, doesn't always refresh the second input field at once, especially if you try to "hammer" those little arrow buttons: if you keep clicking them, the number isn't refreshed, until you move the mouse (tested with win 10 and google chrome).

I have found several topics regarding this problem and tried different approaches (see commented code lines), none of them work for that case.

$(document).ready(function() {
  $('#inp_1').on('keyup', function() {
    calc();
  });

  $('#inp_1').on('change', function() {
    calc();
  });

  function calc() {
    var old_val = parseInt($('#inp_1').val());
    var new_val = old_val + 100;

    $('#inp_2').val(new_val);

    /*
    $("#inp_2").attr('value', new_val);
    $("#inp_2").trigger("change");
    */

    //$("#inp_2").attr('defaultValue', newVal);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="number" step="1" id="inp_1" value="">
<input type="number" step="1" id="inp_2" value="">

prasanth · Accepted Answer · 2017-10-12 06:21:47Z

1

Simply call the calc() with click event also on first input

$(document).ready(function() {
  $('#inp_1').on('keyup click', function() {
    calc();
  });

  $('#inp_1').on('change', function() {
    calc();
  });

  function calc() {
    var old_val = parseInt($('#inp_1').val());
    var new_val = old_val + 100;

    $('#inp_2').val(new_val);

    /*
    $("#inp_2").attr('value', new_val);
    $("#inp_2").trigger("change");
    */

    //$("#inp_2").attr('defaultValue', newVal);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="number" step="1" id="inp_1" value="">
<input type="number" step="1" id="inp_2" value="">

answered Oct 12, 2017 at 6:21

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

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

Comments

Carsten Løvbo Andersen · Accepted Answer · 2017-10-12 07:19:40Z

1

Use mouseup to make sure it runs calc() when you hit those arrows.

You can also combine multiple triggers so you don't need to make a function for each of them as below.

$('#inp_1').on('keyup change mouseup', function() {
  calc();
});

Demo

$(document).ready(function() {
  $('#inp_1').on('keyup, change, mouseup', function() {
    calc();
  });

  function calc() {
    var old_val = parseInt($('#inp_1').val());
    var new_val = old_val + 100;

    $('#inp_2').val(new_val);

    /*
    $("#inp_2").attr('value', new_val);
    $("#inp_2").trigger("change");
    */

    //$("#inp_2").attr('defaultValue', newVal);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="number" step="1" id="inp_1" value="">
<input type="number" step="1" id="inp_2" value="">

edited Oct 12, 2017 at 7:19

answered Oct 12, 2017 at 6:24

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

2 Comments

whocares81 Over a year ago

thank you, but now it doesn´t work when you enter the number with the keyboard.

prasanth Over a year ago

remove the , in your multi event declaration, it's invalid. use only space instead of ,

Collectives™ on Stack Overflow

setting value of input field via jquery doesn't always refresh that field

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related