Web Analytics Made Easy -
StatCounter how do you make objects visible/invisible depending on action of another object - CodingForum

Announcement

Collapse
No announcement yet.

how do you make objects visible/invisible depending on action of another object

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • how do you make objects visible/invisible depending on action of another object

    I need to have some way of showing this:

    Management oYes o No

    If the yes radio button is selected,
    I need to display set of radio buttons to the right but on the same line as the Management radio buttons. Then under the Management radio buttons display a drop-down listbox of items.

    If the no radio button is selected,
    I need to display a different drop-downlist box of items and a checkbox. These items can be placed underneath the Management radio buttons.

    I was thinking of using DIV or LAYER tags but are not too familiar with them. An example would be most appreciated.

  • #2
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="JavaScript">

    function show(id) {
    var el;
    if (typeof document.all != 'undefined') el = document.all(id);
    else if (typeof document.getElementById != 'undefined') el = document.getElementById(id);
    if (el && el.style) el.style.visibility = 'visible';
    }

    function hide(id) {
    var el;
    if (typeof document.all != 'undefined') el = document.all(id);
    else if (typeof document.getElementById != 'undefined') el = document.getElementById(id);
    if (el && el.style) el.style.visibility = 'hidden';
    }

    </script>
    </head>
    <body>
    <form>
    Management: <input name="management" type="radio" value="yes"
    onclick=" show('mgmt_rad');show('mgmt_sel_yes');
    hide('mgmt_sel_no')">
    <strong> yes
    <input name="management" type="radio" value="no"
    onclick=" hide('mgmt_rad');hide('mgmt_sel_yes');
    show('mgmt_sel_no')">
    no </strong>
    <span id="mgmt_rad" style="border:3px black double;visibility:hidden;">
    <input name="management_choice" type="radio" value="something">something
    <input name="management_choice" type="radio" value="another">another
    <input name="management_choice" type="radio" value="also">also
    </span><br><br>
    <div style="position:relative;">
    <span id="mgmt_sel_yes"
    style="position:absolute;top:0px;left:0px;
    visibility:hidden;">
    <select>
    <option>management = yes</option>
    <option></option>
    <option></option>
    </select>
    </span>
    <span id="mgmt_sel_no"
    style="position:absolute;top:0px;left:0px;
    visibility:hidden;">
    <select>
    <option>management = no </option>
    <option></option>
    <option></option>
    </select>
    thingy: <input name="management_thingy" type="checkbox" value="jeepzy3">
    </span>
    </div>
    </form>
    </body>
    </html>
    Last edited by adios; Jul 2, 2002, 11:45 PM.

    Comment


    • #3
      Thanks!

      That worked great for IE and Netscape 6.2. It's exactly what I wanted. But what if you have Netscape 4?

      Also can you recommend a tutorial on the web that would show me the basics of CSS? Is "CSS" what I need to read up on?

      Comment


      • #4
        But what if you have Netscape 4?
        It may be time for mandatory upgrade prompts for Navigator holdouts. In this case, you'd need to put each show/hide group of elements in its own layer, in their own form, yadda-yadda-yadda...then the fun starts, transferring the data to hidden fields so everything can be submitted in one go. I've done this for free before, but my carpal tunnel is acting up.

        HTML/CSS/JavaScript - XML as well, are all client-side necessities. I'd review them in that order, and there's no substitute for a good book! If you're serious, check out O'Reilly. CSS:

        http://www.w3schools.com/

        Comment


        • #5
          Thanks for the hint. I wouldn't had known to put the elements in their own forms within the layers - that's pretty kludgey.

          Comment


          • #6
            You may want to try using 'display' attribute with 'block' and 'none' options instead of 'visibility visible/hidden' - this would remove the content of that division out of the flow without leaving a blank space.
            Vladdy | KL
            "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

            Comment

            Working...
            X