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>
<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.
★ Pro Tip:
WordPress Resources
![[ Wizard’s Collection: SQL Recipes for WordPress ]](/wp/wp-content/uploads/go/250x250-wizards-sql.png)
![[ The Tao of WordPress ]](/wp/wp-content/uploads/go/250x250-tao-of-wordpress.jpg)
![[ Blackhole Pro: Trap and Block Bad Bots ]](/wp/wp-content/uploads/go/250x250-blackhole-pro.jpg)
![[ WordPress Themes In Depth ]](/wp/wp-content/uploads/go/250x250-wp-themes-in-depth-alt.jpg)
![[ GA Pro: WordPress + Google Analytics ]](/wp/wp-content/uploads/go/250x250-ga-pro.jpg)
![[ USP Pro - User Submitted Posts ]](/wp/wp-content/uploads/go/250x250-usp-pro.jpg)