Really Simple Live Comment Preview
Introduction and Caveat
I'm sure that some of you were expecting this entry to discuss traversing the DOM using jQuery methods. After all, I said I would do just that in my last entry. But a couple nights ago, I had the impulse to try a "live comment preview," so I'm going with it. My next entry, then, will be "How to Get Anything You Want - Part 2." I promise.
Please keep in mind as you read through this tutorial the "learning" part of this site's title: I'm learning jQuery just as many of those who will read this entry are. I mention this now because I have the nagging feeling that it was just too easy to create the live preview. Surely I must be doing something wrong. As always, I am counting on the superior knowledge of my readers to point out where my code fails. But enough of the apologies. Let's get started.
Quick Setup
For the live preview I started with the default comment form in WordPress's Kubrick template:
- <form action="..." method="post" id="commentform">
- <p><textarea name="comment" id="comment" cols="100" rows="10" tabindex="4"></textarea></p>
- <p><input name="submit" id="submit" tabindex="5" value="Submit Comment" type="submit"/>
- <input name="comment_post_ID" value="30" type="hidden"/>
- </p>
- </form>
The important part here is the textarea's id="comment". We want to show the contents of that textarea as the user inputs them.
Create the Preview DIV
Now on to the jQuery code. Read the rest of this entry »















