Live Preview In jQuery

jQuery live preview script helps the user to preview their entered information in the site or in the comment box before finally submiting their information to the site.

Here is sample jQuery script :

<script>
    $("document").ready(function(){
         $("#live1").keyup(function(){
              $("#live_pre1").html($(this).val()); 
         });
</script>

 

Steps :

1. I had attached keyup() event with selected DOM element (live1), here in the above example I had selected textarea with it id (live1).

$("#live1").keyup()

2. Whenever keyup() event occurs on the particular DOM element, it will runs the function that is attached to that keyup() event. Here it runs the following function.

 function(){
              $("#live_pre1").html($(this).val()); 
         }

where $(this).val() gets the content of first textarea and attches those content to div tag with id of live_pre1.  .