/    Sign up×
Community /Pin to ProfileBookmark

Conditional form branching: 3 categories : mono hulls, multihulls and power

Copy linkTweet thisAlerts:
Jun 27.2003

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

    • to post a comment
    JavaScript

    4 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @ExuroJun 27.2003 — 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> 
    </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!
    Copy linkTweet thisAlerts:
    @mankindauthorJun 27.2003 — 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
    • Copy linkTweet thisAlerts:
    @PicarolioAug 05.2003 — Could someone please explain the tags and methods used in the above reply by Exuro?

    IE:
    [b]<BR>

    document.getElementById

    <DIV>

    <DIV ID="_____">[/b]    [/quote]

    Thanks!
    Copy linkTweet thisAlerts:
    @ExuroAug 07.2003 — [B]<br>:[/B]

    This is just a line break.

    [B]<div>:[/B]

    This tag is used to specify a certain [I]division[/I] of the page.

    [B]id="___":[/B]

    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.

    [B]getElementById():[/B]

    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!
    ×

    Success!

    Help @mankind spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...