WordPress Code Snippets

A fresh mix of code snippets and tutorials

Live comment preview with JavaScript

74

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>
<html>
	<head>
		<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;
			}
		</script>
	</head>
	<body>
		<form action="" method="post">
			<fieldset>
				<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">
			</fieldset>
		</form>
		<div id="previewbox"></div>
	</body>
</html>

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


Show Support

Like our new Facebook Page to show support!