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>";
	}
}

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:

// add some HTML content when page loads
function writeTags() {
	// checks if element with a "commPrev" id exists at all
	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>";
	}
}
// Comments Preview Box
function commPrev() {
	var komentarBox = document.getElementById('commentform');
	// checks if there is existence of form with an id "commentform"
	if (komentarBox) {
		// when "author" field looses focus
		document.getElementById('author').onblur = function() {
			// write in the "namePrev" content of the "author" field
			document.getElementById('namePrev').innerHTML = document.getElementById('author').value.replace(/(\n|\r)/g,'<br />').replace(/(<br \/>){2,}/gi,'<'+'\/p><p>');
			// write uri into the href attribute of a link to "author's" web site
			document.getElementById('commPrev').getElementsByTagName('div')[0].getElementsByTagName('a')[0].setAttribute('href','http://'+document.getElementById('url').value.replace('http://',''));
			// write in the "messagePrev" content of the "comment" field
			document.getElementById('messagePrev').innerHTML = '<p>'+document.getElementById('comment').value.replace(/(\n|\r)/g,'<br />').replace(/(<br \/>){2,}/gi,'<'+'\/p><p>')+'<'+'\/p>';
		}
		// following are doing the same thing as above, but are triggered by "onkeyup" event
		document.getElementById('comment').onkeyup = function() {
			document.getElementById('messagePrev').innerHTML = '<p>'+document.getElementById('comment').value.replace(/(\n|\r)/g,'<br />').replace(/(<br \/>){2,}/gi,'<'+'\/p><p>')+'<'+'\/p>';
		}
		document.getElementById('author').onkeyup = function() {
			document.getElementById('namePrev').innerHTML = document.getElementById('author').value.replace(/(\n|\r)/g,'<br />').replace(/(<br \/>){2,}/gi,'<'+'\/p><p>');
		}
		document.getElementById('url').onkeyup = function() {
			document.getElementById('commPrev').getElementsByTagName('div')[0].getElementsByTagName('a')[0].setAttribute('href','http://'+document.getElementById('url').value.replace('http://',''));
		}
	}
}
window.onload = function() {
	writeTags();
	commPrev();
}

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!