Create a dynamic form preview with jQuery
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.
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');
It would be nice if it degraded gracefully, showing a traditional “preview” link if there’s no JavaScript enabled.
@mike, thanks for that I’ll make the changes so it does degrade gracefully
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.
@sean thanks for pointing that out, I’ve updated the code with your recommendation. It works much better now thanks!
[...] 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) [...]
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.
@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?
[...] This post was Twitted by del_javascript [...]
Another great tutorial !!! Thanks!!!
muy bueno Graciasss Luisnet MCTS.NET
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.
…
[...] Create a dynamic form preview with jQuery [...]
Minor problem here hah, Type into the textarea alert(‘woo’); and see what happens!
Sorry forgot wp filters that.. and (without the spaces)
@braunson i can’t see anything? nothing happens in FF except adds the alert to the preview. what browser are you using?
Thnx a lot really nice code but will this work in all browsers??
@jyothi yeah it should work in all browsers without any problems
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...
Connect
Latest Poll
Recent Posts
Design & Dev Jobs
Full-time and freelance job opportunities available at Authentic Jobs:
Post a job and reach web professionals everywhere.