www.webdeveloper.com
Results 1 to 3 of 3

Thread: rewrite script to reset form values

  1. #1
    Join Date
    Jul 2010
    Posts
    4

    rewrite script to reset form values

    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

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    Something like this (if you already have a lot of class checking, get an implementation of getElementsByClassName that accepts native implementations).
    Code:
    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
    };
    }
    }
    Great wit and madness are near allied, and fine a line their bounds divide.

  3. #3
    Join Date
    Jul 2010
    Posts
    4
    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.

    Code:
    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; 
    }

    Quote Originally Posted by Declan1991 View Post
    Something like this (if you already have a lot of class checking, get an implementation of getElementsByClassName that accepts native implementations).
    Code:
    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
    };
    }
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles