The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

When someone clicks on the field element we want to clear the field prompt and be ready for typing. When they click away, we want to check if the field is empty and if so, update the field so that the prompt returns.

We also want the default values to look different, more faded than the normal text. We can do that by applying a class called "faded" when the default prompt text is visible.

Code css:

.faded{color:#ccc;}

Here is the script that sets up the form when the page loads. If you place your scripts at the bottom of the page (as you should) just before the </body> tag, you can leave the script as it is.

If you place your scripts in the head of the document then you'll need to use some kind of window.onload method to run the script after the page has finished loading.

There are a few things here to note. The for loop doesn't perform the standard els.length check; it assigns a variable instead. This helps to show what we're actually using the loop for, and it will end when it can't assign any more values.

After the onblur event is assigned we run it. This allows the page to take on the default display for the form elements as the page is loading.

After the page has loaded and people are using it, there are a couple of things that need to occur.

When a field is entered, the clearFieldPrompt() function checks if the field is the same as the default value of the field. If it is then it clears the field and removes the faded class.

When the field is left, we need to show the default value once again if it's been left empty. The field should also be faded if it's the default text as well. These checks are performed separately because the field won't initially be empty when the page loads.

I have inserted all of the JS code you mentioned above into highlight_bottom.js and have also inserted the new contact form code onto my contact page and added some CSS....

And it works!!!!!
(At least in Firefox)

I had to remove highlight.js because otherwise it would retain the onFocus/onBlur attributes when clicking in and out of inputs. Hmmm, but it looks like this removed the IE6/IE7 fix as well... So perhaps I just need to change some more of the code that's inside of highlight.js?

Oh, and also - Can I have my inputs/text areas set globally so that they don't need to be inside of the div id "myForm"? Or will I just need to move all of my existing forms into <div id="myForm">? Just wondering what the easiest way to do this is...

My many many many thanks for getting me this far! You guys have been an enormous help!

Cheers,

"To make an apple pie from scratch,
you must first create the universe.”-Carl Sagan

Also, I noticed that with Google Toolbar installed, it adds that annoying autofill yellow background. So far I've tried a couple of scripts that I found online but they only seem to work for IE or interfere with the code I've already got on my inputs... I wish that Google introduced a way to fix this and not just by "tricking" it with a background color !important, but sitewide entirely.

Any ideas?

Cheers,

"To make an apple pie from scratch,
you must first create the universe.”-Carl Sagan

Microsoft just seems like one of those companies that sticks their hand in the wrong cookie jar sometimes... And the cookie jar I am referring to in this case has the label "Web Development" on it.

Has anybody else noticed that IE7 loads faster than FF3 on Vista? It makes me want to buy a Mac! Anyways, I am not trying to bash PC or Windows, because when it comes down to it, we can really find flaws in any operating system.

Anyways, considering the undesirable CSS support of IE6, I think I will drop all support on it and have a thickbox popup informing IE6 users to upgrade their browser to get the "full experience"...

They can still browse the site this way and it will not be blocking them out completely but at least they can be educated on their poor choice of browser.

Cheers,

"To make an apple pie from scratch,
you must first create the universe.”-Carl Sagan