#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    219
    Rep Power
    11

    Question JQuery: Need Help w/ Show or Hide on Form Field Click


    I've got a jQuery script I use for hiding/showing default values in small forms:

    Code:
    $("#contactForm .textField").focus(function() {
    	if (!default_values[this.id]) {
    		default_values[this.id] = this.value;
    	}
    	if (this.value == default_values[this.id]) {
    		this.value = '';
    	}
    	$(this).blur(function() {
    		if (this.value == '') {
    			this.value = default_values[this.id];
    		}
    	});
    });
    The issue is that I need to use this script on multiple fields (with the same CSS class) within the same form. What syntax changes need to be made? Right now -- this script will work for the first field you click in -- but won't work for the other fields in the same form.

    Thank you for your help.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Did you supply the appropriate key/value pairs for all of the fields in the "default_values" object?

    Have you considered using the new HTML5 placeholder attribute? You could use a script to add support for older browsers.

    http://robertnyman.com/2010/06/17/ad...e-enhancement/
    http://css.dzone.com/news/adding-html5-placeholder
    https://github.com/marcgg/Simple-Placeholder
    http://www.jacklmoore.com/notes/form-placeholder-text
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo spyfu logo threadwatch logo seochat tools logo