Type into a field, and use jQuery/JS to display this value lower on the page

Question

I have a simple task which I'm failing at.

I want to take this field:

<input id="amount" name="amount" value="{$formRefill.amount}" class="textInput auto required validateNumber" type="text">

And once the user has typed a value in there (i.e. 950.50), and they click outside of text field (focus somewhere else), jQuery takes this field and displays it somewhere else on the page.

I was trying to do this inside of a DIV lower down the page.

Thanks.

Answer 1

You need to use change event of the input field:

$('#amount').change(function() {
    $('#mydivid').text($(this).val());
});

Code: http://jsfiddle.net/yg9gF/2/

Answer 2

you should use keyup which will update the div on every char entered.

$('#amount').on('keyup',function() {
    $('#mydiv').text($(this).val());
});

fiddle : http://jsfiddle.net/yg9gF/11/