Use your left/right keys to browse tutorials
Create a dynamic form preview with jQuery

Create a dynamic form preview with jQuery

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on July 19, 2009

I recently had the need to build a dynamic form preview tool for work so clients could preview how the text and images would look before submitting the content to be published. I’ve trimmed down the code and removed the database part completely from this example so we can concentrate purely on the JavaScript.

The JavaScript

$(document).ready(function(){
$('#preview').hide();	
$("#photo").click(update);
$("#title").keypress(update);
});
	
function update(){		
		
$('#preview').slideDown('slow');
var title = $("#title").val();
var photo = $("#photo").val();
$('#Displaytitle').html(title);
$('#image').html('<img src="'+photo+'"/>');
}

The HTML



  
  
  <div class="left">
    <form>
      Choose a site<br/>
      <select name="pic" class="click" id="photo">
        <option value="images/photo1.png">Tweet.me.it</option>
        <option value="images/photo2.png">Dotdashcreate.com</option>
        <option value="images/photo3.png">Papermashup.com</option>
      </select>
      <br/>
      Add a Tagline
      <textarea id="title" class="click" name="title" cols="40" rows="4">This is your default advert text. </textarea>
    </form>
  </div>
  <div class="right">
    <noscript>
    This is where you could put a link for users who have JavaScript disabled to see a preview
</noscript>
    <div id="preview"> This is how your advert will look
      <div id="image"></div>
      <div id="Displaytitle"></div>
    </div>
  </div>
 
<div class="clear"></div>

In the dom ready function we’re simply hiding the div ‘#preview’ as this is our container for the contents of our form preview. next we setup the ‘.click’ and ‘.keypress’ listeners that execute that function ‘update()’ to display the preview of our form contents. Next looking at the ‘update()’ function we firstly display the ‘#preview’ div. Then set the variables ‘title’ and ‘photo’ with the values of the form using the ‘.val()’ attribute. Then to update our form preview we use ‘.html()’ to replace the contents of the selected div.

form-preview

Using .html .append & .prepend

Its useful to know that ‘.html’ will replace the contents of the div with whatever you specify as shown below.

.html()

<div id="replace">This will be replaced</div>

$('#replace').html('with this text');

You can however use ‘.prepend’ and ‘.append’ to add the new contents before or after the current contents as shown below.

.append()

<div id="time">The time is: </div>

$('#time').append('12:00pm');

.prepend()

<div id="time"> is the time</div>

$('#time').prepend('12:00pm');

demodownload



More tutorials from Papermashup
Comments
29 discussions around Create a dynamic form preview with jQuery
Older Comments
  1. Chinese tourists go more the Louvre, the Eiffel Tower, Versailles and Fontainebleau, near the moulin rouge is the thief concentrated high incidence, these places have been arranged for police and equipped with translation machine, visitors can ask for help

  2. Sean P Smith says:

    I was also wondering like how to convert the form values to html, so lets say the value for the drops downs are foo1, foo2 and foo3, how do I output to them as like, say if(value == foo2) { value = $(#thing).html(‘my new html for the element’)} I’ve tried several things but get either null, [object Object] or it breaks… any help would be super appreciated, check out the demo here: http://seanontheinterwebs.com/enews/TestingESigCreator.html

  3. TheDIYworld says:

    Awesome script. Just what I was looking for. It works great and is very simple to set up.

Older Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.