Create a dynamic form preview with jQuery

19 July 2009| 18 Comments| Print

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

18 Comments

  • Mike Mella

    It would be nice if it degraded gracefully, showing a traditional “preview” link if there’s no JavaScript enabled.

  • Ashley (author)

    @mike, thanks for that I’ll make the changes so it does degrade gracefully ;)

  • Sean O

    Nice effect. I think the interface would seem more responsive if the .click() & .keypress() events became .change() and .keyup(), respectively. As it is, SELECT changes and the latest keystroke do not immediately register.

  • Ashley (author)

    @sean thanks for pointing that out, I’ve updated the code with your recommendation. It works much better now thanks!

  • links for 2009-07-20 | Yostivanich.com

    [...] Create a dynamic form preview with jQuery | Papermashup.com "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." (tags: javascript plugin jquery form webdesign webdevelopment programming) [...]

  • ryan

    not that many people care to support it, but the network I work on enforces IE6 only – and your preview doesn’t work on IE6.

  • Ashley (author)

    @Ryan thanks for the feedback, I’m slightly confused as I tested it in IE6 without any problems, could you post a link to a screen shot of how it renders for you?

  • Twitted by del_javascript

    [...] This post was Twitted by del_javascript [...]

  • Manuel

    Another great tutorial !!! Thanks!!!

  • Luinet

    muy bueno Graciasss Luisnet MCTS.NET

  • CSS Brigit | Create a dynamic form preview with jQuery

    Create a dynamic form preview with jQuery…

    Using jQuery to allow users to preview form data before submitting it to the database, or for creating a widget. Includes a demo and download.

  • 網站製作學習誌 » [Web] 連結分享

    [...] Create a dynamic form preview with jQuery [...]

  • Braunson

    Minor problem here hah, Type into the textarea alert(‘woo’); and see what happens!

  • Braunson

    Sorry forgot wp filters that.. and (without the spaces)

  • Ashley (author)

    @braunson i can’t see anything? nothing happens in FF except adds the alert to the preview. what browser are you using?

  • jyothi

    Thnx a lot really nice code but will this work in all browsers??

  • Ashley (author)

    @jyothi yeah it should work in all browsers without any problems

  • Víctor

    Hi, nice work.

    1. I’m using it with a select, multiple text and radio inputs. I don´t know how to use it with radio inputs on that part of the code.

    $(document).ready(function(){
    $(‘#preview’).hide();
    $(“#photo”).click(update);
    $(“#title”).keypress(update);
    });

    2. I just see the char before the current. I can’t see the current char ;)

    Thanks a lot!

Leave a comment...

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled site. To get your own globally-recognized-avatar, register at Gravatar.