pixelSEVENTY2 - p72formDefaultValue

p72form Default Value

This script adds a default value to "text" form fields. It takes the field's defaultValue and puts it in blank fields. The default value comes from two possible locations. An individual field can have its defaultValue set, e.g.
<input type="text" name="email" value="" defaultValue="your email address" />
Alternatively, a LABEL field can be created for the field. This LABEL field must be within the same FORM as the text field, and it's "for" attribute must be set as the form name. e.g.



<label for="email">Your email address</label>

<input type="text" name="email" />

Methods:
This script has a single public method, process(). This should be called in the onload method of the BODY, e.g.



<body onload="new p72formDefaultValue().proces();">

This method goes through all forms on the page, looking for default values to set.

The code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
/*
pixelseventy2 Form Default Value Tool

adds a default value to "text" form fields - takes the field's defaultValue and puts it in blank fields
Updated to also take the default value from a valid <LABEL for="">default value</LABEL> field

methods:
    p72formDefaultValue
    - params:
        none

platforms:
    IE6+ PC        - works
    IE5+ Mac    - untested
    IE4+        - untested
    NN4+        - untested
    NS6+        - untested
    Moz            - works
*/

function p72formDefaultValue(){

	this._trim = function ( _str ) {
		_str = _str.replace( /^[strn]*/g, "" );
		_str = _str.replace( /[strn]*$/g, "" );
		return _str;
	}


	this.process = function() {
		o = document.getElementsByTagName( "LABEL" );
		for ( i=0; i<o.length; i++ ) {
			with( o[i] ) {
				who = ( document.all ) ? o[i].attributes["for"].value : getAttribute( "for");
				if ( who == null ) {
					continue;
				}
				oForm = null;
				obj = o[i];
				while ( obj.parentNode && obj.tagName ) {
					if ( obj.tagName.toUpperCase() != "FORM" ) {
						obj = obj.parentNode;
					} else {
						oForm = obj;
						break;
					}
				}
				if ( oForm != null ) {
					f = null;
					if ( oForm.elements[ who ] ) {
						if ( oForm.elements[ who ].type.toUpperCase() == "TEXT" ) {
							oForm.elements[ who ].setAttribute( "defaultvalue", this._trim( childNodes[0].nodeValue ) );
							style.display = "none";
							continue;
						}
					}
				}
			}
		}
	
		for (i=0;i<document.forms.length;i++){
			with (document.forms[i]){
				document.forms[i].p72onsubmit = document.forms[i].onsubmit;
				for (j=0;j<elements.length;j++){
					dv = (document.all) ? elements[j].defaultvalue : elements[j].getAttribute("defaultvalue");
					if (elements[j].type.toLowerCase() == "text" && (elements[j].value == "" || elements[j].value == null) && dv != "" && dv != null){
						elements[j].value = dv;
						elements[j].p72onblur = elements[j].onblur;
						elements[j].onblur = function() { try{ this.p72onblur(); } catch(e){}; if(this.value == "") { this.value = (document.all) ? this.defaultvalue : this.getAttribute("defaultvalue"); } }
						elements[j].p72onfocus = elements[j].onfocus;
						elements[j].onfocus = function() { try{ this.p72onfocus(); } catch(e){}; if(this.value == ((document.all) ? this.defaultvalue : this.getAttribute("defaultvalue")) ) { this.value = ""; } }
					}
				}
				document.forms[i].onsubmit = function() { new p72formDefaultValue()._restore(this) ; if ( this.p72onsubmit ) { return this.p72onsubmit(); } }
			}
		}
	}	
    
    
	this._restore = function(form){
		with (form){
			for (j=0;j<elements.length;j++){
				dv = (document.all) ? elements[j].defaultvalue : elements[j].getAttribute("defaultvalue");
				if (elements[j].type.toLowerCase() == "text" && dv != ""){
					if (elements[j].value == dv) { elements[j].value = ""; }
				}
			}
		}
	}
}