DIV update when entering text in a text field

Question

I would like to “live” update the DIV on the page with the text that the user enters into the text box. I have the following markup

<div id="previewNote" class="note yellow" style="left:25;top:25px;z-index:1;"> <div class="body"></div> <div class="author"></div> <span class="data"></span> </div> 

and wrote this jQuery code

 /* Listening for keyup events on fields of the "Add Note" form: */ $("[ID$=NoteText]").live('keyup', function(e) { if (!this.preview) this.preview = $("[ID$=previewNote]"); /* Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: */ this.preview.find(".body").html($(this).val().replace(/<[^>]+>/ig, '')); }); 

But the div is not updated. What am I missing?

thanks!

EDIT This is a form.

 <form action="/Note/SaveOrDelete" id="crudForm" method="post"><input id="IssueNoteID" name="IssueNoteID" type="hidden" value="0"> <!-- The preview: --> <div id="previewNote" class="note yellow" style="left:25;top:25px;z-index:1;"> <div class="body"></div> <div class="author">admin</div> <span class="data"></span> </div> <div style="margin: 16px 0px 0px 180px; width: 240px;"> <table border="0" cellpadding="3" cellspacing="1" width="100%"> <tbody><tr valign="top"> <td colspan="2"> <label for="NoteText">Testo</label> <br> <textarea cols="30" id="NoteText" name="NoteText" rows="6"></textarea> </td> </tr> <tr valign="top"> <td colspan="2" align="right"> <label for="NoteDate">Data</label> <input id="noteDate" name="noteDate" style="width: 120px" type="text" value="" class="hasDatepicker"> </td> </tr> </tbody></table> <div style="text-align:right;"> <input type="submit" id="btnSave" value="Salva" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false"> </div> </div> </form> 

but listen, i changed jQuery code in

 /* Listening for keyup events on fields of the "Add a note" form: */ $("[ID$=NoteText]").live('keyup', function(e) { /* Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: */ $("[ID$=previewNote]").find(".body").html($(this).val().replace(/<[^>]+>/ig, '')); }); 

and everything works !!!: Oh

It is very strange...

Answer 1

Using this HTML:

 <textarea id="NoteText"></textarea> <div id="previewNote" class="note yellow" style="left:25;top:25px;z-index:1;"> <div class="body"></div> <div class="author"></div> <span class="data"></span> </div>​​​ 

and this is JS:

 ​jQuery(function($) { var input = $('#NoteText'), preview = $('#previewNote div.body'); input.keyup(function(e) { preview.text(input.val()); }); });​ 

... great for me and you don't need to remove tags.

EDIT

This also works great for me:

 jQuery(function($) { $('#NoteText').live('keyup', function(e) { $('#previewNote div.body').text($(this).val()); }); });​ 

Answer 2

 <input name="product_title" id="product_title" type="text"> <h4 class="title">Enter a Title Here</h4> 

     $ ('# product_title'). on ('keyup', function (e) {
        $ ('. title'). text ($ (this) .val ());
     });

That was my decision.