Dynamic Form Help

[MAFranklin]

I've created a form with several input fields. At the beginning of my
form I use a set of radio buttons to determine how to validate the form as
well as determine what fields are required. Because the form is so lengthy,
I would like to aid users by including visual clues as to what fields
require information by changing the background color of that field to red. I
understand how to accomplish this field by field however, I am looking for
an easier way. Rather that write a big messy function which declares
(document.form.name.style.backgroundColor='red') for every single field, I'd
like to be able to broadcast this command to several chosen fields at once.
Any suggestion would be greatly appreciated.

Best Regards,

Martin Franklin

--
MA********@cox.net

[Fred Oz]

MA********@cox.net wrote:

I've created a form with several input fields. At the beginning of my
form I use a set of radio buttons to determine how to validate the form as
well as determine what fields are required. Because the form is so lengthy,
I would like to aid users by including visual clues as to what fields
require information by changing the background color of that field to red. I
understand how to accomplish this field by field however, I am looking for
an easier way. Rather that write a big messy function which declares
(document.form.name.style.backgroundColor='red') for every single field, I'd
like to be able to broadcast this command to several chosen fields at once.
Any suggestion would be greatly appreciated.

Best Regards,

Martin Franklin

Styles? CSS? Perhaps you should try:

comp.infosystems.www.authoring.stylesheets

Fred.

[kaeli]

In article <9QDfd.18924$SW3.3086@fed1read01>, MA********@Cox.net enlightened
us with...

I've created a form with several input fields. At the beginning of my
form I use a set of radio buttons to determine how to validate the form as
well as determine what fields are required. Because the form is so lengthy,
I would like to aid users by including visual clues as to what fields
require information by changing the background color of that field to red. I
understand how to accomplish this field by field however, I am looking for
an easier way. Rather that write a big messy function which declares
(document.form.name.style.backgroundColor='red') for every single field, I'd
like to be able to broadcast this command to several chosen fields at once.
Any suggestion would be greatly appreciated.

How to shortcut this depends on how you wrote the function that determines
what fields are required.
If you write that function to shove the elements' names into a little array,
you can loop through the array and change the fields (a foreach or such).

Either way, it's still a list of fields that changes, so you'll have to
change them one by one, whether you're changing the style or class or
whatever. A loop is just cleaner and prettier - not any faster.

--
--
~kaeli~
If you don't pay your exorcist, you get repossessed.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[kaeli]

In article <Ba****************@news.optus.net.au>, Oz****@iinet.net.auau
enlightened us with...

MA********@cox.net wrote:

I've created a form with several input fields. At the beginning of my
form I use a set of radio buttons to determine how to validate the form as
well as determine what fields are required. Because the form is so lengthy,
I would like to aid users by including visual clues as to what fields
require information by changing the background color of that field to red. I
understand how to accomplish this field by field however, I am looking for
an easier way. Rather that write a big messy function which declares
(document.form.name.style.backgroundColor='red') for every single field, I'd
like to be able to broadcast this command to several chosen fields at once.
Any suggestion would be greatly appreciated.

Styles? CSS? Perhaps you should try:

That was my first thought, too, but that won't help - he'd still need to
change the class of each one. The required elements change based on which
radio button is chosen by the user.
--
--
~kaeli~
If you don't pay your exorcist, you get repossessed.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[Fred Oz]

kaeli wrote:
[snip]

an easier way. Rather that write a big messy function which declares
(document.form.name.style.backgroundColor='red' ) for every single field, I'd
like to be able to broadcast this command to several chosen fields at once.
Any suggestion would be greatly appreciated.

How about giving each form element an extension to its name that
signifies the options it is mandatory with. Say you have radio buttons
A, B, C and a textarea named "text02". If "text02" is mandatory with
selections A and B, make the name "text02_AB". Do this for every field
that is mandatory for one or more option selections.

Now when radio button with a value 'A' is selected, get all the form
elements:

var els = document.form['aform'].elements

Use a for loop to go through them:

for (var i=0; i<els.length; i++) {
if (els[i].name.match(/A/)){
change background to mandatory colour
} else {
change background to default
}
}

use a regular expression to see if they have an "A" in the name and if
they do, change their class to mandatory or change the background colour
(don't use red, use a pale pink or something soft) or maybe put a border
around them. Any that don't have 'A' in the name are changed to plain.

Of course it means you have to keep the rest of the characters in the
name lowercase, but that shouldn't be too hard. You can use more
complex keys if you want (e.g. add underscores so you get keys _A_ and
_B_ so text02 becomes "text02_A_B_") to provide more flexibility in
naming, but I think it's not necessary.

Cheers, Fred.

[MAFranklin]

Fred...

Excellent suggestion! Thanks for your insight.

Best Regards

Martin

"Fred Oz" <oz****@iinet.net.auau> wrote in message
news:41***********************@per-qv1-newsreader-01.iinet.net.au...

kaeli wrote:
[snip]

an easier way. Rather that write a big messy function which declares
(document.form.name.style.backgroundColor='red' ) for every single field, I'dlike to be able to broadcast this command to several chosen fields at once.Any suggestion would be greatly appreciated.

How about giving each form element an extension to its name that
signifies the options it is mandatory with. Say you have radio buttons
A, B, C and a textarea named "text02". If "text02" is mandatory with
selections A and B, make the name "text02_AB". Do this for every field
that is mandatory for one or more option selections.

Now when radio button with a value 'A' is selected, get all the form
elements:

var els = document.form['aform'].elements

Use a for loop to go through them:

for (var i=0; i<els.length; i++) {
if (els[i].name.match(/A/)){
change background to mandatory colour
} else {
change background to default
}
}

use a regular expression to see if they have an "A" in the name and if
they do, change their class to mandatory or change the background colour
(don't use red, use a pale pink or something soft) or maybe put a border
around them. Any that don't have 'A' in the name are changed to plain.

Of course it means you have to keep the rest of the characters in the
name lowercase, but that shouldn't be too hard. You can use more
complex keys if you want (e.g. add underscores so you get keys _A_ and
_B_ so text02 becomes "text02_A_B_") to provide more flexibility in
naming, but I think it's not necessary.

Cheers, Fred.

[MAFranklin]

I'd like to thank everyone for helping me on this post. Several great
suggestions!

Best Regards

Martin

"kaeli" <ti******@NOSPAM.comcast.net> wrote in message
news:MP************************@nntp.lucent.com...

In article <9QDfd.18924$SW3.3086@fed1read01>, MA********@Cox.net enlightened us with...

I've created a form with several input fields. At the beginning of my form I use a set of radio buttons to determine how to validate the form as well as determine what fields are required. Because the form is so lengthy, I would like to aid users by including visual clues as to what fields
require information by changing the background color of that field to red. I understand how to accomplish this field by field however, I am looking for an easier way. Rather that write a big messy function which declares
(document.form.name.style.backgroundColor='red') for every single field, I'd like to be able to broadcast this command to several chosen fields at once. Any suggestion would be greatly appreciated.

How to shortcut this depends on how you wrote the function that determines
what fields are required.
If you write that function to shove the elements' names into a little

array, you can loop through the array and change the fields (a foreach or such).

Either way, it's still a list of fields that changes, so you'll have to
change them one by one, whether you're changing the style or class or
whatever. A loop is just cleaner and prettier - not any faster.

--
--
~kaeli~
If you don't pay your exorcist, you get repossessed.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace