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
  • http://www.tomesze.com/damier.aspx Louis Vuitton Wallet

    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

  • http://seanontheinterwebs.com Sean P Smith

    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

  • http://www.thediyworld.com TheDIYworld

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