#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,127
    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 threadwatch logo seochat tools logo