CODEWITHSUNDEEP
javascriptjqueryinput
whocares81
whocares81

Reputation: 139

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

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="">

Upvotes: 2

Views: 1282

Answers (2)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

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="">

Upvotes: 1

prasanth
prasanth

Reputation: 22500

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="">

Upvotes: 1

Related Questions