Get the value of a input number in jQuery

Question

I'm working on a form, and I want to get in real time the current value of an input field of type number, as this one :

$(":input").bind('keyup mouseup', function () {
  var coins = $("#coins").val();
  $("#reward").text(coins);
});

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

<input id="coins" type="number" name="coins" value="1" max="999" min="1">

<p id="potential">Potential reward : <b id="reward"></b></p>

But nothing happen when I run it. It says that the value of coins is null. I don't know what I am doing wrong... Anyone could help ?

score 8 · Accepted Answer · answered Apr 02 '17 at 14:31

8

You could use the following:

$(document).on('input', '#coin', function(){
    var coins = $("#coins").val();
    $("#reward").text(coins);
})

answered Apr 02 '17 at 14:31

zeus

224
3
11

score 2 · Answer 2 · answered Apr 02 '17 at 14:30

2

Code shown works fine when user makes edits.

If you need it to display when page loads just trigger one of the events

$(":input").on('keyup mouseup', function () {
  var coins = $("#coins").val();
  $("#reward").text(coins);
}).trigger('mouseup');

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

<input id="coins" type="number" name="coins" value="1" max="999" min="1">

<p id="potential">Potential reward : <b id="reward"></b></p>

Note that bind() is deprecated in favor of using on()

answered Apr 02 '17 at 14:30

charlietfl

169,044
13
113
146

I saw that the snippet is working well... I don't understand why my code is not working on my own, surely problems with something else. I will try to search again. Thanks anyway for your help :) – Louis 'LYRO' Dupont Apr 02 '17 at 14:31
We can't help fix it without a way to reproduce the problem – charlietfl Apr 02 '17 at 14:32
I finally found my error :) It was just an issue of id that was already used :) – Louis 'LYRO' Dupont Apr 02 '17 at 15:50

Get the value of a input number in jQuery

2 Answers2

Linked