Welcome to WebmasterWorld Guest from 23.22.46.195

Forum Moderators: open

Format form input fields

formatting form input fields with javascript

   
10:56 am on Jan 23, 2010 (gmt 0)

10+ Year Member



I have a form that applies a descriptive legend to blank form fields and changes them to blank when the user starts to make an entry in the field.

Is there any way that I can format (or preferably apply a CSS class) to this legend? My aim is for the form to show the legend in uncompleted fields in light grey, with entered fields showing in standard black.

The code I am using is:

<input type="text" name="FirstName" onfocus="if (this.value=='first name') this.value = ''" onblur="if (this.value=='') this.value = 'first name'" value="first name" />

Is this possible and, if so, how? Thanks in anticipation of any help.

1:55 am on Jan 24, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



<input type="text" name="FirstName" onfocus="if (this.value=='first name') this.value = '';this.className='noPrompt';" onblur="if (this.value=='') this.value = 'first name';this.className='prompt';" value="first name" class="prompt"/>
5:50 pm on Jan 25, 2010 (gmt 0)

10+ Year Member



Thanks daveVk - works a treat!
6:02 pm on Jan 25, 2010 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Not quite. That will change the class back to prompt regardless of whether the value was '' or not. Easily fixed by adding the missing {}. :)

Try this instead:
<input type="text" name="FirstName" onfocus="if (this.value=='first name') {this.value = '';this.className='noPrompt'};" onblur="if (this.value=='') {this.value = 'first name';this.className='prompt';}" value="first name" class="prompt"/>

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month