Hello,

I have a simple, three-field form that I am setting default values from within my jquery script. When a user clicks on a field the default values are removed, leaving that field blank for the user to type into.

The form accepts the default values from my jQuery script just fine. And when I click on the "to" and "from" fields, the default text is, in fact, removed. The problem is when I click on the textarea, the default value does not get removed.

Any thoughts?

Here is my html:

1. <form class="blogForm" name="blogForm">
2.     <Input class="blogFormTo" type="text" name="email" />
3.     <Input class="blogFormFrom" type="text" name="email" />
4.     <textarea class="blogFormNote"></textarea>
5. </form>

And my jquery:

1. $(document).ready(function()
2. {
3. // clear form field values on click
4. 
   
5. // set default values
6. $(".blogFormTo").val("To: (Separate multiple addresses with commas)");
7. $(".blogFormFrom").val("From: (Enter email address)");
8. $(".blogFormNote").val("Add a personal message");
10. // clear the "to" field if value is default
11. $(".blogFormTo",this).click(function()
12. {
13. if (this.value=="To: (Separate multiple addresses with commas)")
14. {
15. this.value = "";
16. }
17. });
18. 
    
19. // clear the "from" field if value is default
20. $(".blogFormFrom",this).click(function()
21. {
22. if (this.value=="From: (Enter email address)")
23. {
24. this.value = "";
25. }
26. });
28. // clear the "text" field if value is default
29. $(".blogFormNote",this).click(function()
30. {
31. if (this.value == "Add a personal message")
32. {
33. $(this).value = "";
34. }
35. });
36. });

Thanks!

nucklebone