rewrite script to reset form values

[wkrieger]

i have a form that uses javascript to clear/restore default values when the user clicks on or clicks out of the fields.

<input class="formInput" type="text" name="email" value="Email" onblur="if(this.value == '') this.value = 'Email';" onfocus="if(this.value == 'Email') this.value = '';"/>

and

<textarea class="formInput" name="message" rows="8" cols="50" onblur="if(this.value == '') this.value = 'Message';" onfocus="if(this.value == 'Message') this.value = '';">Message</textarea>

how can i rewrite these functions to be stored in a separate script and only apply to class "formInput" (which i am using for CSS styling)? there are only a few form elements, so there's not much need for loops or scripting for general cases

[Declan1991]

Something like this (if you already have a lot of class checking, get an implementation of getElementsByClassName that accepts native implementations).

onload = function () { // Presumes no other onloads
var els = document.getElementsByTagName("input"), el;
for (var i = 0; i < els.length; i++) {
el = els[i];
if (el.className == "formInput") {
el.onfocus = function () {
// Whatever
};
el.onblur = function () {
// Whatever
};
}
els = document.getElementsByTagName("textarea");
for (i = 0; i < els.length; i++) {
el = els[i];
if (el.className == "formInput") {
el.onfocus = function () {
// Whatever
};
el.onblur = function () {
// Whatever
};
}
}

[wkrieger]

thanks for steering me in the right direction. with your help i was able to finalize this. i was able to add a simple validation function to verify that all fields are correctly filled.

var inputs = document.getElementsByTagName('input'); 
onload = init; 

function init() { 
	for (i=0; i<inputs.length; i++) { 
		var input = inputs[i]; 
		if (input.type == 'text') { 
			input.defaultText = input.value; 
			input.onfocus = clearText;  
			input.onblur = fillText; 
		}
	}
} 
function clearText() { 
	if (this.value == this.defaultText) { 
		this.value = ''; 
}
function fillText() { 
	if (this.value == '') { 
		this.value = this.defaultText; 
	}
}
function validate() { //runs on form submit
	for (i=0; i<inputs.length; i++) { 
		var input = inputs[i];
		if (input.value == input.defaultText || input.value == '') { 
			alert('Please fill in all fields.'); 
			return false; 
		}
	}
	return true; 
}

Something like this (if you already have a lot of class checking, get an implementation of getElementsByClassName that accepts native implementations).

onload = function () { // Presumes no other onloads
var els = document.getElementsByTagName("input"), el;
for (var i = 0; i < els.length; i++) {
el = els[i];
if (el.className == "formInput") {
el.onfocus = function () {
// Whatever
};
el.onblur = function () {
// Whatever
};
}
els = document.getElementsByTagName("textarea");
for (i = 0; i < els.length; i++) {
el = els[i];
if (el.className == "formInput") {
el.onfocus = function () {
// Whatever
};
el.onblur = function () {
// Whatever
};
}
}