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

[msmith29063]

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

$("#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.

[ReFreezed]

Your script should work if the IDs of all your text fields are unique.

However, I do see something not-so-optimal in your script. Every time a text field is focused you add a brand new event listener to that field on the "blur" event. You should add the blur event listener at the same time you add the focus event listener (i.e. only one time).

[msmith29063]

I'll assign IDs to the fields. I was trying to avoid doing this.

How would the focus/blur correction look?

[ReFreezed]

$("#contactForm .textField").focus(function() {
	if (!default_values[this.id]) {
		default_values[this.id] = this.value;
	}
	if (this.value == default_values[this.id]) {
		this.value = '';
	}
}).blur(function() {
	if (this.value == '') {
		this.value = default_values[this.id];
	}
});

[msmith29063]

Okay. That makes sense. Thank you for your time and help.