CODEWITHSUNDEEP
jqueryinputnumbers
Louis 'LYRO' Dupont
Louis 'LYRO' Dupont

Reputation: 1112

Get the value of a input number in jQuery

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 ?

Upvotes: 7

Views: 55709

Answers (2)

zeus
zeus

Reputation: 254

You could use the following:

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

Upvotes: 11

charlietfl
charlietfl

Reputation: 171669

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()

Upvotes: 2

Related Questions