LB Beta

• All 7
• Freebies 1
• Geo Location 1
• Web Design 1
• Javascript 1
• Tools 2
• Work Life 0
• Business 1

How to build a live comment preview with Javascript and HTML

Posted in Javascript on 27 March 2008 | 247458 Comments

In recent times, it has become quite a trendy and nifty trick to show a live comment preview on a lot of blog websites. I remember just how excited i was the first time i saw this in action on a dotnet blogengine application. In this article i will show you how to implement a live comment preview on your website with just simple javascript and HTML.

Okay, to get started i will start by creating a javascript(.js) file with the following on it.

function ShowCommentPreview()
{
  
// Access the HTML elements we care about from our page
  
var enteredCommentName = document.getElementById("CommentName");
  
var previewCommentName = document.getElementById("CommentPreviewName");
  
var enteredComment = document.getElementById("CommentBody");
  
var previewComment = document.getElementById("CommentPreviewBody");

  
// Let javascript do it's final bit of magic
 
 previewCommentName.innerHTML = enteredCommentName.value + " Says: ";
  
previewComment.innerHTML = enteredComment.value;
}

As you can see the javascript is almost self explanatory. First, I declared variables and i assigned various id's of the HTML elements i cared about to them from our page. Finally i take the value of the entered comment and placed it as the value of the comment preview.

Some of the HTML

<textarea id="CommentBody"></textarea>

Finally, i added a HTML Onclick attribute with the Javascript function call to the textarea to wire up the HTML and the javascript method together for the final trick.

That's it ... pretty easy thing to do. I hope you will enjoy building it on your own website. Good luck.

Download the sample file live-comment-preview.zip (4KB)