The only way to clear input text properly

[LurkerPatrol]

Hi Guys,

I'm working on a form and was wondering if this is the simplest/only way to clear input text on a form and have it come back if the field is left blank.

<p> Name: <input type="text" value="First Name" name="fname" onfocus="if(this.value == 'First Name'){this.value=''};" onblur="if(this.value==''){this.value='First Name'};"/>
<input type="text" value="Last Name" name="lname" onfocus="if(this.value == 'Last Name'){this.value=''};" onblur="if(this.value==''){this.value='Last Name'};"/></p><br /> 
<p> Phone number: <input type="text" name="phone" value="[phone]" onfocus="if(this.value == '[phone]'){this.value=''};" onblur="if(this.value==''){this.value='[phone]'};"

Many thanks,
LP

[Airshow]

Lurker,

Personally I choose not to set what are effectively "labels" as field values. The reason being that once a value has been entered, the "label" is no longer available to be seen by the user. He/she is thus denied full confidence when doing a last scan of the form before submitting. I therefore prefer to use text labels adjacent to each field.

However, many people do choose to do what you want here and I can't say it's actually wrong.

So, here's another way of achieving the same end. For advantages etc., see notes below:

onload = function(){
	var fieldText = [
		{ fld:'fname', txt:'' },
		{ fld:'lname', txt:'' },
		{ fld:'phone', txt:'' }
	];
	for(var i=0; i<fieldText.length; i++){
		var fld = document.forms.myForm[fieldText[i].fld];
		if(fld.value) { fieldText[i].txt = fld.value; }
		fld.setAttribute('index', i);
		fld.onfocus = function(){
			if(this.value == fieldText[this.getAttribute('index')].txt){
				this.value = '';
			}
		};
		fld.onblur  = function(){
			if(this.value == ''){
				this.value = fieldText[this.getAttribute('index')].txt;
			}
		};
	}
};

<form name="myForm">
<p>Name: <input type="text" value="First Name" name="fname" />&nbsp;<input type="text" value="Last Name"  name="lname" /></p>
<p>Phone number: <input type="text" name="phone" value="[phone]"></p>
</form>

NOTES:

• The HTML is simplified - it's generally considered bad practise these days to define handlers in the HTML (partially fashion).
• Each "value" is defined once and does not need to rekeyed in onblur/onfocus handlers.
• The handlers are reused.
• It's easy to add further fields to this regime - simply extend the array fieldText
• The code is similar to that you would write when using one of the popular javascript productivity libs such as Jquery or Prototype.
• The code may be difficult for beginners to penetrate.

Hope this helps.

Airshow

[LurkerPatrol]

Hello Airshow,

Thank you for the wonderful advice! I understand your code, and will try to implement it in my own website.

So this removes the need to stick a whole bunch of the same code in all the text boxes that you have right? I think that's awesome and extremely efficient. It's probably best as right now my form is mainly a dummy form as I sort of etch out the details (including data I/O, accessing and writing to a database, among other things). Once I flesh out those pieces then I will code in the actual form, with all the elements of it. But by then if I have the majority of the back-end code worked out then it's just a matter of putting in

<input type="text">
<input type="radio">

and what-have-you everywhere.

[Airshow]

So this removes the need to stick a whole bunch of the same code in all the text boxes that you have right?

Exactly so.

.... then it's just a matter of putting in

<input type="text">
<input type="radio">

and what-have-you everywhere.

Not forgetting name="xxx", and (where appropriate) value="yyy", checked="checked" (for radio buttons), and maybe other attributes.

And you can always add more code the the anonymous onload function to do further tricky stuff after the page has loaded.

Good luck with it.

Airshow