I have a form (just one field) which I am populating with some data. I would like to get me Div container populated with the data I put there in a real time. So no refresh, after I type in some text in the form field, I get it in the div as well. Does anybody know how to do it? JQuery, AJAX?Any advice appreciated.

I have a form (just one field) which I am populating with some data. I would like to get me Div container populated with the data I put there in a real time. So no refresh, after I type in some text in the form field, I get it in the div as well. Does anybody know how to do it? JQuery, AJAX?Any advice appreciated.

• javascript
• jquery
• forms
• html

3 Answers 3

var div = $('div')[0];

$('input').bind('keyup change', function() {
    div.innerHTML = this.value;
});

Try it out: http://jsfiddle/H6P2z/

Of course you should make the selectors specific to your actual elements.

With jQuery you can do this very easily:

$('#textFieldId').bind('change', function (event, previousText) {
    $('#divId').html($(this).val());
});

You could bind an onkeyup event to the input field. When the event fires, you can grab the contents of the field and do what you want with it.

This might look like this:

$(selector).keyup(function(e) {
   // find the value of the field
   var text = $(this).val();

   // do something with it
   $(yourDivSelector).html(text);
});