How to build a live comment preview with Javascript and HTML

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" onkeydown="ShowCommentPreview();"></textarea>

Finally, i added a HTML attribute to the textarea called the "onKeydown" which is a special javascript thing that we use to wired up the HTML and the javascript method to do 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).