PDA

Click to See Complete Forum and Search --> : Conditional form branching: 3 categories : mono hulls, multihulls and power

mankind
06-27-2003, 11:23 AM
Hi guys,

Is there a way to branch a form very simly in the following manner (I have
very minimum js skills):



Three choices (radio buttons) presented to user:

MONO HULLS
MULTI HULLS
POWER

If User selects eg: MULTIHULLS Then make VISIBLE the following:

Lagoon Model you are interested in [drop down] None | Lagoon 1 | Lagoon
2 | Lagoon 3

Premium Model you are interested in [drop down] None | Preumium 1 |
Premium 2 | Premium 3


SUBMIT

I would need help with specific code. I think dhtml is out the question as
it is not browser universal...

Any ideas appreciated

- Jason
Exuro
06-27-2003, 12:41 PM
Okay, here's what I came up with:

<HTML>
<BODY>
<FORM NAME="form1">
<INPUT TYPE="radio" NAME="hullType"
onClick="document.getElementById('multi').style.visibility='hidden'">
MONO HULLS<BR>
<INPUT TYPE="radio" NAME="hullType"
onClick="document.getElementById('multi').style.visibility='visible'">
MULTI HULLS<BR>
<INPUT TYPE="radio" NAME="hullType"
onClick="document.getElementById('multi').style.visibility='hidden'">
POWER<BR>
<DIV ID="multi" STYLE="visibility:hidden">
Lagoon Model you are interested in:<BR>
<SELECT>
<OPTION>None</OPTION>
<OPTION>Lagoon 1</OPTION>
<OPTION>Lagoon 2</OPTION>
<OPTION>Lagoon 3</OPTION>
</SELECT><BR><BR>

Premium Model you are interested in:<BR>
<SELECT>
<OPTION>None</OPTION>
<OPTION>Preumium 1</OPTION>
<OPTION>Premium 2</OPTION>
<OPTION>Premium 3</OPTION>
</SELECT><BR>&nbsp;
</DIV>
<INPUT TYPE="submit" VALUE="Submit">
</FORM>
</BODY>
</HTML>

You can add in your own values for the different form elements, but that should work. I tested it in IE, Mozilla, and Opera. And it works in all three just fine! Hope that helped!
mankind
06-27-2003, 01:45 PM
Wow Exuro - that is absolutely beautiful - sooo simple and elegant.

* BUT *

I fear repercussions for non-IE browsers as you seem to be using the STYLE attribute in a div tag.

Am I not asking for trouble if I use this approach...

Appreciate your help!

- Jason
Picarolio
08-05-2003, 11:55 AM
Could someone please explain the tags and methods used in the above reply by Exuro?

IE:
<BR>
document.getElementById
<DIV>
<DIV ID="_____">

Thanks!
Exuro
08-06-2003, 08:44 PM
<br>:
This is just a line break.

<div>:
This tag is used to specify a certain division of the page.

id="___":
This attribute it kind of like name="___". You can put an ID in pretty much any tag, and then later use it to access that part of the page with the ID. IDs are used quite often with CSS to apply certain styles to a certain part of a page.

getElementById():
This is a JavaScript method used to access an object on the page. You place the ID of the object inside the () as the agrument, and then it works just like a pointer to the object with that ID.

So, what I was doing in that script was I made a division of the page that included the two Select objects I wanted hidden. I then used CSS to set them to hidden as default. I then used some JavaScript so that when you clicked on certain things, the getElementById called up the division by its ID and changed it to visible. Hope that all made sense!