Papermashup

Subscribe


Tweets


"RT @Eva_Shaughnessy: #finedining @romomobilecafes restaurant this evening with #NewHair #winning #SaturdayNight #GirlsNightOut http://t.co/…"

@ashleyford 3 weeks ago

"RT @kycutwilson: @ashleyford @burgerbeartom incredible. There's 5 more left! Shout about it!!"

@ashleyford 4 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Create a dynamic form preview with jQuery

AshleyAshley

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

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 29
  • Louis Vuitton Wallet
    Posted on

    Louis Vuitton Wallet Louis Vuitton Wallet

    Reply Author

    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


  • Sean P Smith
    Posted on

    Sean P Smith Sean P Smith

    Reply Author

    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


  • TheDIYworld
    Posted on

    TheDIYworld TheDIYworld

    Reply Author

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


  • alex
    Posted on

    alex alex

    Reply Author

    Hello,

    As you can see, if you select the first option in the combobox, nothing happens. So, this is my solution: add $(“#photo”).click(update); before $(“#photo”).change(update); and will work very well.


  • Eric
    Posted on

    Eric Eric

    Reply Author

    I seem to be running into problems having multiple images show separately. Both preview divs show when one of the dropdowns is selected and both dropdowns work independently with the images, but I would like only one preview div to show upon selection of the appropriate dropdown. I hope to create several separate selections within the same form. I posted my problem for review on JSFiddle: http://jsfiddle.net/AckTm/ Any help would be greatly appreciated.


  • Eric
    Posted on

    Eric Eric

    Reply Author

    Nice article! For anyone wanting to use radio buttons, this is what I came up with. There may be a better way, but this seems to work so far.

    $(document).ready(function(){
    $(‘#preview’).hide();
    $(‘input:radio[name=photo]’).change(update);
    $(“#title”).keyup(update);
    });

    function update(){

    $(‘#preview’).fadeIn(‘slow’);
    var title = $(“#title”).val();
    var photo = $(‘input:radio[name=photo]:checked’).val();
    $(‘#Displaytitle’).html(title);
    $(‘#image’).html(”);

    }


  • Kyathi
    Posted on

    Kyathi Kyathi

    Reply Author

    Nice article.


  • Fredy
    Posted on

    Fredy Fredy

    Reply Author

    Hi all,

    It is nice, but I think it doesn’t work with URLs and pictures, if anybody has an idea, please let me know.


  • mike
    Posted on

    mike mike

    Reply Author

    Hi to all! i have a small problem…i’m new to jquery and not very good on javascript.
    I have created mutiple input box with text preview in a div and everything ok. I have duplicated and append on id the suffix 2, so url became id=”url2″.
    My problem is that i could have on same page more of it but url+number is created dinamically. How can i check all the url+suffix in the javascript and show the preview in right div?
    below is the code i have:

    $(document).ready(function(){
    //$(‘#preview’).hide();
    $(“#title_before”).keyup(update);
    $(“#title_link”).keyup(update);
    $(“#title_after”).keyup(update);
    $(“#url”).keyup(update);
    $(“#title_before2″).keyup(update);
    $(“#title_link2″).keyup(update);
    $(“#title_after2″).keyup(update);
    $(“#url2″).keyup(update);
    });

    function update(){
    //$(‘#preview’).slideDown(‘slow’);
    var title_before = $(“#title_before”).val();
    var url = $(“#url”).val();
    var title_link = $(“#title_link”).val();
    var title_after = $(“#title_after”).val();
    $(‘#Displaytitle’).html(title_before + ‘ ‘ + title_link + ‘ ‘+ title_after );
    var title_before2 = $(“#title_before2″).val();
    var url2 = $(“#url2″).val();
    var title_link2 = $(“#title_link2″).val();
    var title_after2 = $(“#title_after2″).val();
    $(‘#Displaytitle2′).html(title_before2 + ‘ ‘ + title_link2 + ‘ ‘+ title_after2 );
    }

    Display text 1

    Display text 2


  • Arthur
    Posted on

    Arthur Arthur

    Reply Author

    This is script is exactly what I would wish for a new website. Just one minor detail: the user input text is one character behind. A or is required to show the last entered character. In the demo it works fine but not on my installation. Tested with Firefox and IE8.


  • Víctor
    Posted on

    Víctor Víctor

    Reply Author

    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!


  • jyothi
    Posted on

    jyothi jyothi

    Reply Author

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


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

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


  • Braunson
    Posted on

    Braunson Braunson

    Reply Author

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


  • Braunson
    Posted on

    Braunson Braunson

    Reply Author

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


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

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


  • Luinet
    Posted on

    Luinet Luinet

    Reply Author

    muy bueno Graciasss Luisnet MCTS.NET


  • Manuel
    Posted on

    Manuel Manuel

    Reply Author

    Another great tutorial !!! Thanks!!!


  • ryan
    Posted on

    ryan ryan

    Reply Author

    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
      Posted on

      Ashley Ashley

      Reply 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?


  • Sean O
    Posted on

    Sean O Sean O

    Reply Author

    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
      Posted on

      Ashley Ashley

      Reply Author

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


  • Mike Mella
    Posted on

    Mike Mella Mike Mella

    Reply Author

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


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

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


    • Sean P Smith
      Posted on

      Sean P Smith Sean P Smith

      Reply Author

      How would you create that content on a separate html file? That’s really what I’m trying to do, let users customize their email signatures through a form and then they need to grab an html file to use. I’m a js noob so I’m not familiar with what functions you can use.