CODEWITHSUNDEEP
javascriptjqueryhtml
Grey
Grey

Reputation: 891

jquery dynamically print out value of input

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?

Upvotes: 1

Views: 1955

Answers (1)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

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

Upvotes: 1

Related Questions