471,078 Members | 888 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,078 software developers and data experts.

Dynamic Web Forms

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

Jul 21 '05 #1
9 3357
"MA********@cox.net" <MA********@Cox.net> a écrit dans le message de
news:CNFfd.19527$SW3.507@fed1read01
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.


Didn't understand very well, but maybe :

<input class="required" ...

Jul 21 '05 #2
"MA********@cox.net" <MA********@Cox.net> writes:
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,


Why not make the form two steps? In the first step, they select a
radio button and submit the form. Depending on which radio button is
selected, they get a different form in the second step.

--
Chris
Jul 21 '05 #3
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.


Put the names of the required fields into an array and loop through it to
execute your above statement. This is a Javascript task, so if you need more
help you will find it in a Javascript group. This will be small and clean.

There is no way to change CSS properties of a group of fields globally but
changing them via Javascript.

HTH
Markus
Jul 21 '05 #4
On Wed, 27 Oct 2004 13:09:16 +0200, Markus Ernst <derernst@NO#SP#AMgmx.ch>
wrote:

[snip]
This is a Javascript task, so if you need more help you will find it in
a Javascript group. This will be small and clean.
Actually, the OP was directed from c.l.js because this would be better
handled with CSS. As Pierre suggested, something like:

.required {
background-color: #ff9f9f;
color: #000000;
}

<input class="required" ...>

would be more appropriate.
There is no way to change CSS properties of a group of fields globally
but changing them via Javascript.


On some arbitrary run-time trigger, no there isn't, but I don't think
that's what the OP is looking for.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 21 '05 #5

"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message
news:opsgi5triix13kvk@atlantis...
On Wed, 27 Oct 2004 13:09:16 +0200, Markus Ernst <derernst@NO#SP#AMgmx.ch>
wrote:

[snip]
This is a Javascript task, so if you need more help you will find it in
a Javascript group. This will be small and clean.
Actually, the OP was directed from c.l.js because this would be better
handled with CSS. As Pierre suggested, something like:

.required {
background-color: #ff9f9f;
color: #000000;
}

<input class="required" ...>

would be more appropriate.


It would also be a static solution. He's asking for a dynamic solution,
where the appearance of the page changes depending on the user's initial
interactions. If someone directed him here from c.l.js, it must be because
he didn't understand this.
There is no way to change CSS properties of a group of fields globally
but changing them via Javascript.


On some arbitrary run-time trigger, no there isn't, but I don't think
that's what the OP is looking for.


It's exactly what the OP said he was looking for. "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."

Jul 21 '05 #6
[Cross-posted to c.l.js. Follow-ups set to c.l.js.]

On Wed, 27 Oct 2004 09:57:07 -0400, Harlan Messinger
<h.*********@comcast.net> wrote:
"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message
news:opsgi5triix13kvk@atlantis...
[snip]
[...] something like:

.required {
background-color: #ff9f9f;
color: #000000;
}

<input class="required" ...>

would be more appropriate.


It would also be a static solution.


To a certain extent, yes. Scripting could alter the class attribute
dynamically, but in that case, it would be best done entirely dynamically
(unless Chris' suggestion was used).
He's asking for a dynamic solution, where the appearance of the page
changes depending on the user's initial interactions.
To be honest, I didn't read the entire original post, just the follow-up
in c.l.js that sent the OP here. I should have.
If someone directed him here from c.l.js, it must be because he didn't
understand this.


Perhaps. You'd have to ask that person.

[Changing CSS rules]
On some arbitrary run-time trigger, no there isn't, but I don't think
that's what the OP is looking for.


It's exactly what the OP said he was looking for.


Then my mistake. I assumed the direction to ciwas was correct.

The optimum solution would depend on the structure of the form.

To the OP: do you have a URL to demonstrate the form?

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 21 '05 #7
Markus Ernst wrote:
MA********@cox.net wrote:
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.

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.

Put the names of the required fields into an array and loop through
it to execute your above statement.


My recommendation: change the *class* through js, not the style. Use
external css to set up display rules for the various classes.
This is a Javascript task, so if you need more help you will find it
in a Javascript group.
Agreed.
There is no way to change CSS properties of a group of fields
globally but changing them via Javascript.


You can change appearances based on class, though. And it would keep the
presentation in one place -- an external css file -- while keeping the
dynamic stuff in another place -- an external js file.

--
Brian (remove "invalid" to email me)
Jul 21 '05 #8
"Harlan Messinger" <h.*********@comcast.net> a écrit dans le message de
news:2u*************@uni-berlin.de
It would also be a static solution. He's asking for a dynamic
solution

(...)

Well I think mutch information is required to give any adapted answer...

Jul 21 '05 #9
Everyone, thanks for your help!

I ended using a combination of Java and CSS to accomplish this task. See my
OP and follow-ups on comp.lang.javascript if interested.

Best Regards

Martin

"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:5g*********************@bgtnsc04-news.ops.worldnet.att.net...
Markus Ernst wrote:
MA********@cox.net wrote:
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.

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.

Put the names of the required fields into an array and loop through
it to execute your above statement.


My recommendation: change the *class* through js, not the style. Use
external css to set up display rules for the various classes.
This is a Javascript task, so if you need more help you will find it
in a Javascript group.


Agreed.
There is no way to change CSS properties of a group of fields
globally but changing them via Javascript.


You can change appearances based on class, though. And it would keep the
presentation in one place -- an external css file -- while keeping the
dynamic stuff in another place -- an external js file.

--
Brian (remove "invalid" to email me)

Jul 21 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Nathan Bloomfield | last post: by
1 post views Thread by mtech1 | last post: by
3 posts views Thread by MikeY | last post: by
7 posts views Thread by AdeelAlvi | last post: by
2 posts views Thread by deejayquai | last post: by
3 posts views Thread by RahimAsif | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.