im trying to use javascript in my textarea to display text until the user clicks on it. The text should show on load and disappear when clicked. However, mine seems to do the opposite. My text doesn't show on load until the user has clicked the box and clicked out of it again? not too sure what I've done wrong.

<form action="upload.php" method="POST">

<input type="hidden" name="hidden_id" value="<?php print $id; ?>"/>
<input type="text" id="username" name="sent_by" onfocus="if (this.value == 'Your Name')
this.value = '';" onblur="if (this.value == '') this.value = 'Your Name';" maxlength="30"  
value="Your Name" />

<input type="text" id="user_email" name="sent_email" onfocus="if (this.value == 'Your Email')   
this.value = '';" onblur="if (this.value == '') this.value = 'Your Email';" maxlength="30" 
value="Your Email" />
<br /><br />

<textarea name="message" value="Enter Your Message Here..." cols="60" rows="5" 
id="artical_message" onfocus="if (this.value == 'Enter Your Message Here...') this.value = '';" 
onblur="if (this.value == '') this.value = 'Enter Your Message Here...';" ></textarea>

<p align="right">
<input name="submit_ment" type="submit" value="Send Message" class="contact_button">
</p>
</form>

im trying to use javascript in my textarea to display text until the user clicks on it. The text should show on load and disappear when clicked. However, mine seems to do the opposite. My text doesn't show on load until the user has clicked the box and clicked out of it again? not too sure what I've done wrong.

<form action="upload.php" method="POST">

<input type="hidden" name="hidden_id" value="<?php print $id; ?>"/>
<input type="text" id="username" name="sent_by" onfocus="if (this.value == 'Your Name')
this.value = '';" onblur="if (this.value == '') this.value = 'Your Name';" maxlength="30"  
value="Your Name" />

<input type="text" id="user_email" name="sent_email" onfocus="if (this.value == 'Your Email')   
this.value = '';" onblur="if (this.value == '') this.value = 'Your Email';" maxlength="30" 
value="Your Email" />
<br /><br />

<textarea name="message" value="Enter Your Message Here..." cols="60" rows="5" 
id="artical_message" onfocus="if (this.value == 'Enter Your Message Here...') this.value = '';" 
onblur="if (this.value == '') this.value = 'Enter Your Message Here...';" ></textarea>

<p align="right">
<input name="submit_ment" type="submit" value="Send Message" class="contact_button">
</p>
</form>

• php
• javascript
• html

Share Improve this question Follow edited Sep 16, 2011 at 14:41 Hellodan asked Sep 15, 2011 at 19:06 HellodanHellodan 1,21844 gold badges2323 silver badges4242 bronze badges 3

• Your code works perfectly fine: jsfiddle/GMf3W – CashIsClay Commented Sep 15, 2011 at 19:10
• Works for me. – Alex Commented Sep 15, 2011 at 19:11
• @Artsemis and @Alex. It's his textarea that isn't working not the inputs. See my answer. – Dan Short Commented Sep 15, 2011 at 19:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

textarea tags don't have value attributes. Try this: http://jsfiddle/kudTF/

Place the content inside the <textarea> tags.

<form action="upload.php" method="POST">

<input type="hidden" name="hidden_id" value="<?php print $id; ?>"/>
<input type="text" id="username" name="sent_by" onfocus="if (this.value == 'Your Name')
this.value = '';" onblur="if (this.value == '') this.value = 'Your Name';" maxlength="30"  
value="Your Name" />

<input type="text" id="user_email" name="sent_email" onfocus="if (this.value == 'Your Email')   
this.value = '';" onblur="if (this.value == '') this.value = 'Your Email';" maxlength="30" 
value="Your Email" />
<br /><br />

<textarea name="message" value="Enter Your Message Here..." cols="60" rows="5" 
id="artical_message" onfocus="if (this.value == 'Enter Your Message Here...') this.value = '';" 
onblur="if (this.value == '') this.value = 'Enter Your Message Here...';" >Enter Your Message Here...</textarea>

<p align="right">
<input name="submit_ment" type="submit" value="Send Message" class="contact_button">
</p>
</form>

Replace:

<textarea name="message" value="Enter Your Message Here..." cols="60" rows="5" 
id="artical_message" onfocus="if (this.value == 'Enter Your Message Here...') this.value = '';" 
onblur="if (this.value == '') this.value = 'Enter Your Message Here...';" ></textarea>

with:

<textarea name="message" cols="60" rows="5" 
id="artical_message" onfocus="if (this.value == 'Enter Your Message Here...') this.value = '';" 
onblur="if (this.value == '') this.value = 'Enter Your Message Here...';" >Enter Your Message Here...</textarea>

First, that is inline Javascript with no jQuery used.

Use something like this:

<script language="javascript">
$(document).ready(function() {
    $('#artical_message').val('Enter Your Message Here...')
        .focus(function(){
            if($(this.val() == 'Enter Your Message Here...'))
                $(this).val('');
        })
        .blur(function(){
            if($(this.val() == ''))
                $(this).val('Enter Your Message Here...');
        });
});
</script>

UPDATE: Oh, my bad, I had thought you were using jQuery. Well, for starters the text area has no value, use the innerHTML property.

Text Area doesn't have "Value" Attribute, your content (Enter Your Message Here...) shuold be before the closing tag, thus your code will be like

<form action="upload.php" method="POST">

<input type="hidden" name="hidden_id" value="<?php print $id; ?>"/>
<input type="text" id="username" name="sent_by" onfocus="if (this.value == 'Your Name')
this.value = '';" onblur="if (this.value == '') this.value = 'Your Name';" maxlength="30"  
value="Your Name" />

<input type="text" id="user_email" name="sent_email" onfocus="if (this.value == 'Your Email')   
this.value = '';" onblur="if (this.value == '') this.value = 'Your Email';" maxlength="30" 
value="Your Email" />
<br /><br />

<textarea name="message"  cols="60" rows="5" 
id="artical_message" onfocus="if (this.value == 'Enter Your Message Here...') this.value = '';" 
onblur="if (this.value == '') this.value = 'Enter Your Message Here...';" >Enter Your Message Here...</textarea>

<p align="right">
<input name="submit_ment" type="submit" value="Send Message" class="contact_button">
</p>
</form>