asked on

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

nap0leon

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

nap0leon

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

dcayce

ASKER

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?

nap0leon

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?

dcayce

ASKER

Very nice work there.

Yeah, that would do it. Red, or a gray then another color for the input text.

ASKER CERTIFIED SOLUTION

nap0leon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dcayce

ASKER

That's a beautiful thing there, Jason.

Thanks for all your help!

dcayce

ASKER

Great Expert, this one.