A fresh mix of code snippets and tutorials

Live comment preview with JavaScript

Here is a simple way to display a live comment preview for any comment or contact form using ordinary JavaScript.

To see how it works, create a blank HTML file and add the following code:

<!DOCTYPE html>
		<title>Live Comment Preview with JavaScript</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="content-language" content="en" />
		<script type="text/javascript">
			window.onload = function() {
				function commentPreview(){
					document.getElementById('previewbox').innerHTML = document.getElementById('comment').value;
					return false;
				document.getElementById('preview').onclick = commentPreview;
		<form action="" method="post">
				<label for="comment">Leave a comment</label>
				<textarea name="comment" cols="20" rows="5" id="comment"></textarea>
				<input name="preview" type="submit" value="Live Preview" id="preview">
				<input name="submit" type="submit" value="Submit Comment">
		<div id="previewbox"></div>

Then visit the page in your browser, type a comment, and click the “Live Preview” button. Customize as needed.

★ Pro Tip:

Banhammer ProWizard’s SQL Recipes for WordPressSAC Pro