Gray text as default text for form value, but black text on user entered data... ???

I have a form where I’d like to have "Example: Ph.D., M.D." in the text box as gray text when the page loads… however, when the focus is on that box, i’d like to change the text color to black.

Is there any way to do this?

Also, i’m looking to remove the "Example: Ph.D., M.D." when the onFocus is triggered… i tried to write a javascript function, but i can’t even get the following function to show the text input’s value:

<script type="text/javascript">
        function makeNull(elementID)
        {
            alert(document.getElementById(elementID).value);
        }
    </script>

Being called from:

<input id="titleID" type="text" name="title" value="Example: Ph.D., M.D." onFocus="makeNull(titleID);" />

EDIT:
but doing this works:

<script type="text/javascript">
        function makeNull(elementID)
        {
            alert(document.getElementById('titleID').value);
        }
    </script>

Why can’t i use variables that are passed in?

document.getElementByID(‘titleID’).style.color = ‘black’

What about using a variable instead of the actual tr id?

onfocus="this.style.color=’#000′;this.value=”;"

and most people say you should add the event without using inline attributes.

if you want to do it with a function you can do the same thing only passing this, onfocus="myFunc(this);"

Okay, but i dont want the value to be nothing if they’ve already added some text, and then go back to the box.
and passing in "this" when calling the function still doesn’t work

then just say if(this.value == ‘[insert default value]‘){this.value = ”;} that way it only clears if they haven’t changed the default value yet. or you could remove the event handler after the first time it’s fired.

and passing ‘this’ should work just fine

onfocus="myFunc(this);"

function myFunc(o){
o.value = ”;
}

or whatever.

The jQuery equivalent.

$('input[type=text]).focus( function() {
	$(this).css('color', '#000');
});
$('input[type=text]).blur( function() {
	$(this).css('color', #666');
});

You can also do this:

if (textbox.value==textbox.defaultValue)
{
textbox.value = "";
}

<script type="text/javascript">
        function makeNull(elementID)
        {
            alert(document.getElementById(elementID).value);
        }
    </script>

<input id="titleID" type="text" name="title" value="Example: Ph.D., M.D." onFocus="makeNull(titleID);" />

<script type="text/javascript">
        function makeNull(elementID)
        {
            alert(document.getElementById('titleID').value);
        }
    </script>

And the jQuery equivalent to this:

$('input[type=text]).focus( function() {
	var value = $(this).val();
	$(this).css('color', '#000');
	$(this).val = '';
});
$('input[type=text]).blur( function() {
	$(this).css('color', #666');
	if ($(this).val() == '') {
		$(this).val(value);
	}
});

that’s good to know, i never knew it kept track of the default value. although the more i think about it removing the event handler the first time it’s called is probably the better solution.

$('input[type=text]).focus( function() {
	var value = $(this).val();
	$(this).css('color', '#000');
	$(this).val = '';
});
$('input[type=text]).blur( function() {
	$(this).css('color', #666');
	if ($(this).val() == '') {
		$(this).val(value);
	}
});

To the TS, I would use jquery only if you’re going to need it for other things. It’s a small library but no sense in loading it if that’s all you’d be using it for.

Bullshit.

If you’re using JavaScript on any page I’m a firm believer it should be handled by jQuery. Loading a 24kb file isn’t going to do shit and won’t increase costs that much unless you’re getting millions of visits monthly.

Not to mention, there are plenty of other benefits using jQuery, such as executing after DOM tree loads which ensures execution much quicker as opposed to without a framework. And you’re forced to develop javascript to degrade gracefully (as it should be developed).

Seriously, you guys need to move away from those depreciated parameters (onsubmit/onclick/whatever) and start coding using events anyway. Even if you don’t use jQuery, you should be developing heavily using the DOM API. It’s 2010 folks.

i’ve never done events with jquery, i’m guessing it’s much easier? i know firefox and internet explorer handle adding events in a similar but just different enough way to piss you off, which is why i avoid it for little dinky scripts like this.

edit- oh wait, i just noticed you did it in one of your examples earlier. so basically just $(selector).focus( [insert first-class function here] ); seems simple enough

on a side note though, how does jquery handle multiple events and how would you remove them?

Even if you don’t use jQuery, there are much better ways of developing JavaScript using the DOM API.

This is a terrific book for JavaScript’s DOM API. It’ll get you familiar with the concepts of developing JavaScript to degrade gracefully, and have completely effective and efficient scripts that sway away from using parameters that are only supported in older doctypes.

The problem occurs because people research results on the internet, and mix their shit code with DOM, and you end up getting a clusterfuck of code. The entire purpose of DOM is to utilize the DOM tree to access any node you need to.

You have complete control over any and every event. If you’re into the habit of coding using controls like the onSubmit event, I suggest people pick up the above book as well, because coding using DOM and jQuery pretty much go hand-in-hand.

jQuery queues events, and there are functions to unbind events as needed, or cancel queuing.

This is actually a useful thing to have, and I’ll probably be using it at some point. So thanks.