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
Awesome script. Just what I was looking for. It works great and is very simple to set up.
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.
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.
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(”);
}
Nice article.
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.
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
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.
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!
Thnx a lot really nice code but will this work in all browsers??
Sorry forgot wp filters that.. and (without the spaces)
Minor problem here hah, Type into the textarea alert(‘woo’); and see what happens!
Pingback: CSS Brigit | Create a dynamic form preview with jQuery
muy bueno Graciasss Luisnet MCTS.NET
Another great tutorial !!! Thanks!!!
Pingback: Twitted by del_javascript
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.
Pingback: links for 2009-07-20 | Yostivanich.com
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.
It would be nice if it degraded gracefully, showing a traditional “preview” link if there’s no JavaScript enabled.
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.
Designer and web developer, Co-founder and Technical Director at Harkable.com London. Previously I worked at InMobi, Spotify and MySpace. Interests include photography and making short videos. Also an avid F1 fan. I also run Mega Infographics for your daily dose of the best infographics.
Follow us on Twitter and get in-stream updates.
Subscribe to all the Papermashup tutorials and articles straight to your RSS reader.
Sign up and get all the Papermashup tutorials straight to your inbox.
28 discussions around Create a dynamic form preview with jQuery