hiding and showing form elements

Discussion in 'JavaScript' started by Psychotomus, May 14, 2006.

  1. #1
    Heres what I want to do. When a user clicks on a option box, i want to display a text box below it or a combo box. Anyone know how to do this?

    or if a user changes there selection in a combo box. a different combo box shows.
     
    Psychotomus, May 14, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Do you mean something like this show/hide div demo? Here's the source—I really should get rid of the inline styles :oops:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta name="generator"
            content=
            "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
            
      <meta http-equiv="content-type"
            content="text/html; charset=utf-8" />
    
      <title>show/hide div</title>
    <style type="text/css">
    /*<![CDATA[*/
    
    body {
        font-size: 100%;
        }
    
    p {
        font-size: 1em;
        }
    
    fieldset {
        border: 0 none;
        }
    
    h1, h2 {
        text-align: center;
        }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    //<![CDATA[
     
    function change(which) {
        document.getElementById('div1').style.display = 'none';
        document.getElementById('div2').style.display = 'none';
        document.getElementById('div3').style.display = 'none';
        document.getElementById(which).style.display = 'block';
        }
    
    function cleardiv() {
        document.getElementById('div1').style.display = 'none';
        document.getElementById('div2').style.display = 'none';
        document.getElementById('div3').style.display = 'none';
        }
    
    //]]>
    </script>
    </head>
    
    <body>
      <h1>Switch Divs</h1>
    
      <p>The purpose here is to cause one of multiple select elements to
      display based on the option selected by another select element. The
      original try used the onclick event handler on each option element.
      That caused IE to have a brain fart. So I moved to the onchange event
      handler on the select element.</p>
    
      <form action=""
            method="get">
        <fieldset>
          <select id="choices"
                    onchange="change(value)">
            <option value="">
    
              - - - - -
            </option>
    
            <option value="div1">
              Div 1
            </option>
    
            <option value="div2">
              Div 2
            </option>
    
            <option value="div3">
    
              Division 3
            </option>
          </select> <select id="div1"
                    style="display: none;">
            <option value="d1o1">
              1st
            </option>
    
            <option value="d1o2">
              2nd
            </option>
    
          </select>
    
          <div id="div2"
               style="display: none; background: #8f8;">
            <h2>Division 2</h2><select id="div2select">
              <option value="d2o1">
                1st
              </option>
    
              <option value="d2o2">
                2nd
              </option>
    
            </select>
          </div>
    
          <div id="div3"
               style="display: none; background: #f88;">
            <h2>Division 3</h2>
    
            <p>same ol' same ol'</p>
          </div>
        </fieldset>
    
      </form>
    </body>
    </html>
    
    Code (markup):
    cheers,

    gary
     
    kk5st, May 14, 2006 IP
  3. Psychotomus

    Psychotomus Guest

    Messages:
    427
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    awesome. exactly what I need.
     
    Psychotomus, May 15, 2006 IP