Live Preview In jQuery

Posted by & filed under JAVASCRIPT, 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.

jQuery Live Preview  live Example

jQuery Live Preview Demo

jQuery Live Preview

jQuery Live Preview

Here is sample jQuery script :

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

 

download jQuery Live Preview Script

Download

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.  .

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!