Comment Form Preview Script

I promised you long time ago some handy JavaScripts, wasn’t i? Promises have to be kept, especialy when they are so teasty and usefull. I’ve implemented this same script in this website’s comment form, so you can see it in action right here.

It degrades fine when JavaScript is disabled and there’s no vital functionality missed. There’s no even extra <script> tags, just one small portion of extra tags, which are here just to demonstrate possibilities.

And action!

First, we’ll organize form’s fields to meet accessibility requirements. Every field should have corresponding <label>. Of course, you will not just copy and paste it, as it may not have exact tag attribute values like those of your mail-processing script.

<form action="#" method="post" id="commentform">
 <fieldset>
 	<label for="author" title="name">name:</label> <input class="text" type="text" name="author" id="author" value="" size="20" tabindex="1" /><br /><br />
 	<label for="email" title="e-mail">e-mail:</label> <input class="text" type="text" name="email" id="email" value="" size="20" tabindex="2" /><br /><br />
 	<abel for="uri" title="uri">uri:</label> <input class="text" type="text" name="uri" id="url" value="" size="20" tabindex="3" /><br /><br />
 	<label for="comment" title="comment">comment:</label> <textarea name="comment" id="comment" cols="70" rows="4" tabindex="4"></textarea><br /><br />				<label for="commPrev" title="This is what your post will look like...">preview:</label>
 		<div id="commPrev">
 		<noscript>
 			<p>Sorry, but preview only works with JavaScript enabled.</p>
 		</noscript>
 		</div>
 	<label for="launch" title="Press this to append your comment">action:</label> <input class="submit" name="submit" id="launch" type="submit" tabindex="5" />
 </fieldset>
</form>

I like to specify <tabindex>. It’s not likely that browser will mess up something, but you never know. Someone will maybe disagree about using <br /> tags, but if you preview this form in a browser, it will be quite intuitive and usable even without styling.

Separating behaviour from structure

As you can see, there is no inline or embeded JavaScripts in this HTML, so we need to set some extra “hooks” for our content. And here it goes (in external commPrev.js file):

// add some HTML content when page loads
function writeTags() {
 // checks if element with a "commPrev" id exists...
 if (document.getElementById('commPrev')) {
 	// ... and adds HTML tags which will carry some content
 	document.getElementById('commPrev').innerHTML = "<div>You are <a href=\"\"><span id=\"namePrev\">John Doe<\/span><\/a>, and you are saying:<br \/><br \/><\/div><div id=\"messagePrev\"><\/div>";
 }
}

The above function is not doing anything yet, so add somewhere at the bottom of commPrev.js:

window.onload = function() {
 writeTags();
}

Now, browser interprets this combination of HTML and JavaScript something like this:

<form action="#" method="post" id="commentform">
 <fieldset>
 	<label for="author" title="name">name:</label> <input class="text" type="text" name="author" id="author" value="" size="20" tabindex="1" /><br /><br />
 	<label for="email" title=" e-mail">e-mail:</label> <input class="text" type="text" name="email" id="email" value="" size="20" tabindex="2" /><br /><br />
 	<label for="uri" title="uri">uri:</label> <input class="text" type="text" name="uri" id="url" value="" size="20" tabindex="3" /><br /><br />
 	<label for="comment" title="comment">comment:</label> <textarea name="comment" id="comment" cols="70" rows="4" tabindex="4"></textarea><br /><br />				<label for="commPrev" title="This is what your post will look like...">preview:</label>
 		<div id="commPrev">
 		<div>You are <a href=""><span id="namePrev">John Doe</span></a>, and you are saying:<br /><br /></div><div id="messagePrev"></div>
 		<noscript>
 			<p>Sorry, but preview only works with JavaScript enabled.</p>
 		</noscript>
 		</div>
 	<label for="launch" title="Press this to append your comment">action:</label> <input class="submit" name="submit" id="launch" type="submit" tabindex="5" />
 </fieldset>
</form>

Next we need another function and we have to attach some events to it. Add into and modify commPrev.js, so now it contains:

The code removed for parsing issues, please download it here: comment-form-snippet.txt

Okay, i’m going to explain it. First we check if there’s <form id="commentform" ... >. If found we attach some events to certain elements. Usualy your commentators have cookies enabled, so their names and the rest of data are already filled in when they start writing their message. At least author’s name is required, so we attach onblur event to it and automatically update comment preview section with available data when this field looses focus. onkeyup event is attached to all input fields, so as you type, the function writes content into preview section. In the end we added commPrev(); to window.onload event to load it into the document.

Improvements and Customisation

Sure, this is not perfect, but it’s a good start. The script is tested on IE 5.01, IE 5.5, IE 6.0, Opera 7.x and Mozilla 1.4+. Explanations on attaching events could be found elsewhere. There’s more room for improvements, so if you have a suggestion, i’ll be happy to hear!

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?