jquery dynamically print out value of input

Question

I'm working on a dynamic calculation program to practice jquery, but so far it's not going well, I can store the values in a variable, of course (see code here).

<form>
    Tafeltje van:
    <input type="number" name="tafel" id="tafel" />

    Aantal:
    <input type="number" name="aantal" id="aantal" />
</form>
<div id="output"></div>

and the JS:

var tafel = $('#tafel').val();
var aantal = $('#aantal').val();

How would one be able to print out these values in output while the user is typing in the text fields?

use .keyup() event and in keyup event add the values then out put it using .text() or .html() — guradio
– guradio, Commented Jun 24, 2016 at 7:40

Mohit Bhardwaj · Accepted Answer · 2016-06-24 07:48:51Z

1

You can bind your code with keyup or input event of the inputs. Then, once you have got the values, you can use either text() or html() to display the values in #output div in whatever format you want.

// $("input").on("keyup", function(){
$("input").on("input", function(){
  var tafel = $('#tafel').val();
  var aantal = $('#aantal').val();

  $("#output").text("tafel: " + tafel + " aantal: "+aantal);
});//keyup

edited Jun 24, 2016 at 7:48

answered Jun 24, 2016 at 7:40

Mohit Bhardwaj

10.1k7 gold badges41 silver badges66 bronze badges

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

4 Comments

a_nain Over a year ago

keydown would make more sense, wouldn't it ? In case user keeps holding a key.

Mohit Bhardwaj Over a year ago

@you.know.nothing Yes, I checked around after your comment and I think native input event is more suited for it then. Let me know if keydown is better than input. Thanks for pointing out :)

a_nain Over a year ago

That's even better :)

Grey Over a year ago

holy, totally forgot to set this as the answer, only just saw it as it popped up as getting 1k views, anyway, set as answer

Collectives™ on Stack Overflow

jquery dynamically print out value of input

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related