 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / October 2004Dynamic 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  SignatureMAFranklin@cox.net > 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 [quoted text clipped - 7 lines] > 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" ... > 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. SignatureChris > 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 [quoted text clipped - 7 lines] > 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 [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 SignatureMichael Winter Replace ".invalid" with ".uk" to reply by e-mail. > [snip] > [quoted text clipped - 12 lines] > > 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." [Cross-posted to c.l.js. Follow-ups set to c.l.js.] [snip] >> [...] something like: >> [quoted text clipped - 8 lines] > > 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 SignatureMichael Winter Replace ".invalid" with ".uk" to reply by e-mail. > 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... >> 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 [quoted text clipped - 7 lines] > 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. SignatureBrian (remove "invalid" to email me) 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 > >> 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 [quoted text clipped - 22 lines] > presentation in one place -- an external css file -- while keeping the > dynamic stuff in another place -- an external js file. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.