Expand Script to affect multiple Input Fields

Experts;

I have a script designed to show default text in a textfield, text that disappears onFocus, and reappears if no user text is input. The problem with the script is that it only affects one field. How can I expand the capabilities of the script to effect multiple fields?

I'm using this to show the words "Required Field" in various textfields.

Many thanks.

Cayce
The script:

window.addEvent('domready', function(){
  var default_value = 'Required Field';
  var text_input = $('required_field_1');
  text_input.addClass('default_value');
  text_input.value = default_value;
  // click into text field
  text_input.addEvent('focus', function(){
    if (this.value == default_value) {
      this.value = '';
      text_input.removeClass('default_value');
    }
  });
  // click out of text field
  text_input.addEvent('blur', function(){
    if(this.value=='') {
      this.value = default_value;
      text_input.addClass('default_value');
    }
  });
}); 


THE CSS (sets text color);
.default_value { color: #666; } 

The Input Field Code:
<input id="required_field_1" name="First_Name" />

Open in new window

dcayceAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nap0leonCommented:
With jQuery you can do it like this (presuming you assign class="withDefault" to each requried field):
$(document).ready(function() {
    $('.withDefault').attr("value","Required Text");
    $('.withDefault').attr("onFocus","if(this.value == defaultValue) {this.value = '';}");
    $('.withDefault').attr("onBlur","if (this.value == '') {this.value = defaultValue;}");
});

Open in new window

0
nap0leonCommented:
Here's an example - I don't set the value of the fields (which I've shown above), but it uses the "withDefault' class to assignt he onblur and onfocus events.:
http://www.jasondahlin.com/2011/coding-tips/orderForm_pizza.asp

the HTML page that is the demo form is here:
http://www.jasondahlin.com/2011/coding-tips/code-samples/orderForm-pizza.html
0
dcayceAuthor Commented:
nap0leon (Jason?);

Beautiful stuff there at the JasonDahlin site! Very impressive.

And this bit of code is so much more elegant. Here's a question, though: what if I wanted to control the default text color. How would I apply a style to this script?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

nap0leonCommented:
Yah - that's me.

You want to change the color of the text in the input box?
Do you want only the default text ("Required Text") to be a different color (like, red) and then have it switch to a normal color (like black) when they start typing?
0
dcayceAuthor Commented:
Very nice work there.

Yeah, that would do it. Red, or a gray then another color for the input text.
0
nap0leonCommented:
OK, examples below use red for "Required Text" and black for when the user starts typing. You can change these to whatever you want.  I recommend using the Hex color codes rather than the names though (red = #FF0000, black = #000000)

set the default color to red by adding this to your styles:
  .withDefault{color:red;}

Open in new window


then update the lines I gave earlier to toggle between the colors you want to use:
    $('.withDefault').attr("onFocus","if(this.value == defaultValue) {this.value = '';this.style.color='black';}");
    $('.withDefault').attr("onBlur","if (this.value == '') {this.value = defaultValue;this.style.color='red';}");

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dcayceAuthor Commented:
That's a beautiful thing there, Jason.

Thanks for all your help!
0
dcayceAuthor Commented:
Great Expert, this one.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.