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 ?

zeus · Accepted Answer · 2017-04-02 14:31:10Z

11

You could use the following:

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

answered Apr 2, 2017 at 14:31

zeus

2543 silver badges12 bronze badges

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

Comments

charlietfl · Accepted Answer · 2017-04-02 14:30:26Z

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 2, 2017 at 14:30

charlietfl

172k14 gold badges125 silver badges154 bronze badges

3 Comments

Louis 'LYRO' Dupont Over a year ago

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

charlietfl Over a year ago

We can't help fix it without a way to reproduce the problem

Louis 'LYRO' Dupont Over a year ago

I finally found my error :) It was just an issue of id that was already used :)

Collectives™ on Stack Overflow

Get the value of a input number in jQuery

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related