Javascript to set intial value?

I have created a form with a text box with an initial value of “Full Name” to request the name of the user without wasting space next to my textbox. I am using some simple Javascript to ensure that when the user selects the text box the initial value is cleared. I would like to set up another function, so that if the user clicks off of the input box without entering anything, the initial value of “Full Name” is reinserted so that the user can remember what the text box was asking for. So far my code looks like this and is functioning properly:

<input id="name" name="name" value="Full Name" title="Full Name" onfocus="this.value=''" type="text" size="24" />


I am thinking that what I need to do is add a value for an onChange event with the requirement that if the input is less than 1 it will revert to saying “Full Name”. I’m sure that this is not that difficult to do, but I could really use some ideas of how to set this function up.

 

With your current configuration, you will always clear the contents of that input box when the user clicks in it. I believe this is NOT what you want. Also, since it seems that you may indeed be using this function in other input boxes, it might be a good idea to standardise your approach. Consider the following:

<script>
function showWhatGoesInHere(forWho, labelDisplay)
{
var theObject = document.getElementById(forWho);
if (theObject.value == "")
{
theObject.value = labelDisplay;
}
else if (theObject.value == labelDisplay)
{
theObject.value = "";
}
return true;
}
</script>

Now replace:
<input id="name" name="name" value="Full Name" title="Full Name" onfocus="this.value=''" type="text" size="24" />
with
<input id="name" name="name" value="Full Name" title="Full Name" onfocus="showWhatGoesInHere(this.id,'Full Name');" onblur="showWhatGoesInHere(this.id,'Full Name');" type="text" size="24" />

In fact you can add it as many times as you want for all of your input tags:
<input id="name1" name="name1" value="Full Name" title="Full Name" onfocus="showWhatGoesInHere(this.id,'Full Name');" onblur="showWhatGoesInHere(this.id,'Full Name');" type="text" size="24" />
<input id="name2" name="name2" value="Full Name2" title="Full Name2" onfocus="showWhatGoesInHere(this.id,'Full Name2');" onblur="showWhatGoesInHere(this.id,'Full Name2');" type="text" size="24" />
<input id="name3" name="name3" value="Full Name3" title="Full Name3" onfocus="showWhatGoesInHere(this.id,'Full Name3');" onblur="showWhatGoesInHere(this.id,'Full Name3');" type="text" size="24" />
<input id="name4" name="name4" value="Full Name4" title="Full Name4" onfocus="showWhatGoesInHere(this.id,'Full Name4');" onblur="showWhatGoesInHere(this.id,'Full Name4');" type="text" size="24" />
<input id="name5" name="name5" value="Full Name5" title="Full Name5" onfocus="showWhatGoesInHere(this.id,'Full Name5');" onblur="showWhatGoesInHere(this.id,'Full Name5');" type="text" size="24" />

HTH

daTropics