Dynamic Form Help

**Fred Oz** · Jul 23 '05, 03:00 PM

Re: Dynamic Form Help

MAFranklin@cox. net wrote:[color=blue]
> 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.back groundColor='re d') 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
>[/color]

Styles? CSS? Perhaps you should try:

comp.infosystem s.www.authoring.stylesheets

Fred.

**kaeli** · Jul 23 '05, 03:01 PM

Re: Dynamic Form Help

In article <9QDfd.18924$SW 3.3086@fed1read 01>, MAFranklin@Cox. net enlightened
us with...[color=blue]
> 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.back groundColor='re d') 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.
>[/color]

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** · Jul 23 '05, 03:01 PM

Re: Dynamic Form Help

In article <BaEfd.179$I52. 6445@news.optus .net.au>, OzFred@iinet.ne t.auau
enlightened us with...[color=blue]
> MAFranklin@cox. net wrote:[color=green]
> > 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.back groundColor='re d') 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.[/color]
>[/color]
[color=blue]
> Styles? CSS? Perhaps you should try:[/color]

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** · Jul 23 '05, 03:02 PM

Re: Dynamic Form Help

kaeli wrote:
[snip][color=blue][color=green][color=darkred]
>>>an easier way. Rather that write a big messy function which declares
>>>(document.fo rm.name.style.b ackgroundColor= '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.[/color][/color][/color]

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@cox.net** · Jul 23 '05, 03:03 PM

Re: Dynamic Form Help

Fred...

Excellent suggestion! Thanks for your insight.

Best Regards

Martin

"Fred Oz" <ozfred@iinet.n et.auau> wrote in message
news:41810075$0 $13744$5a62ac22 @per-qv1-newsreader-01.iinet.net.au ...[color=blue]
> kaeli wrote:
> [snip][color=green][color=darkred]
> >>>an easier way. Rather that write a big messy function which declares
> >>>(document.fo rm.name.style.b ackgroundColor= 'red') for every single[/color][/color][/color]
field, I'd[color=blue][color=green][color=darkred]
> >>>like to be able to broadcast this command to several chosen fields at[/color][/color][/color]
once.[color=blue][color=green][color=darkred]
> >>>Any suggestion would be greatly appreciated.[/color][/color]
>
> 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.[/color]

**MAFranklin@cox.net** · Jul 23 '05, 03:03 PM

Re: Dynamic Form Help

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

Best Regards

Martin

"kaeli" <tiny_one@NOSPA M.comcast.net> wrote in message
news:MPG.1be96c eb40d352c298a22 7@nntp.lucent.c om...[color=blue]
> In article <9QDfd.18924$SW 3.3086@fed1read 01>, MAFranklin@Cox. net[/color]
enlightened[color=blue]
> us with...[color=green]
> > I've created a form with several input fields. At the beginning of[/color][/color]
my[color=blue][color=green]
> > form I use a set of radio buttons to determine how to validate the form[/color][/color]
as[color=blue][color=green]
> > well as determine what fields are required. Because the form is so[/color][/color]
lengthy,[color=blue][color=green]
> > 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[/color][/color]
red. I[color=blue][color=green]
> > understand how to accomplish this field by field however, I am looking[/color][/color]
for[color=blue][color=green]
> > an easier way. Rather that write a big messy function which declares
> > (document.form. name.style.back groundColor='re d') for every single field,[/color][/color]
I'd[color=blue][color=green]
> > like to be able to broadcast this command to several chosen fields at[/color][/color]
once.[color=blue][color=green]
> > Any suggestion would be greatly appreciated.
> >[/color]
>
> 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[/color]
array,[color=blue]
> 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
>[/color]

Dynamic Form Help

Dynamic Form Help

Comment

Comment

Comment

Comment

Comment

Comment