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 ?
You could use the following:
$(document).on('input', '#coin', function(){
var coins = $("#coins").val();
$("#reward").text(coins);
})
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()