Results 1 to 2 of 2

Thread: Multiple hidden show/hide div's base on a combo box and a check box

  1. #1
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Multiple hidden show/hide div's base on a combo box and a check box

    Hello everyone,

    I am more comfortable with PHP than Javascript so I'm hoping someone can help me out with my question.

    What I would like to have is an html form that has a combo box, and if someone select a certain selection in the combo box, then a hidden div right under it becomes visible.
    That div would hold a pair of radio buttons, and based on the selection of those, another div may appear with a input field shows up.


    Code:
    <form OnSubmit="return ValidateForm(form)" action="mysql.php" method="post" name="form" >
    
    <tr>
      <td><img src="require.gif" align="center" width="7" height="5"> Employee Type</td><td colspan="3"><select name="type">
          <option value="Please Select an employee type:">Please Select an employee type:</option>
          <option value="Department Transfer">Department Transfer</option>
          <option value="Previous Student">Previous Student</option>
          <option value="Physician / P.A.">Physician / P.A.</option>
          <option value="Volunteer">Volunteer</option>
          <option value="Update Employee">Update Current Employee</option>
          <option value="New Employee">New Employee</option>      
      </td>
    </tr>
    So based on this code, I'd like to make it where if someone selects Physician / P.A. from the combo box, then a pair of radio buttons show up underneath it asking lets say "choice1" or "choice2", if "choice2" is selected another div containing a text input field.

    I've tried to do this with my limited JS knowlege, but have never gotten it to work so any help would be great!

    Thank you~

  2. #2
    Join Date
    Jul 2008
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Default

    Hi,

    try this simple variation, in which i have used some object to itemized and minipulate the selected state of combo box.

    Here's the complete document sample:
    Code:
    <?xml version="1.0" encoding="utf-8" standalone="no"?>
    <?xml-stylesheet type="text/css" href="#css21" media="screen"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta http-equiv="Window-target" content="_top" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>Free Live Help!</title>
    <style id="css21" type="text/css" media="screen">
    /* <![CDATA[ */
    html, body {
      text-align : center;
      min-width : 960px;
      width : auto;
    }
    form, table {
      border : none;
      margin : 0 auto;
      padding : 0; }
    table {
      border-collapse : collapse;
      width : 100%;
      min-height : 36px;
      color : #708090;
      letter-spacing : 1px;
      text-align : center;
      background-color : #eee; }
    td:first-child { 
      width : 20%;
      background-color : #fff;
      border-right : 1px solid; }
    td {
      padding : .300em .800em .300em .800em;
      width : auto;
      height : inherit;
      vertical-align : middle; 
      border-top : 1px solid;
      border-bottom : 1px solid; }
    .show { display : block; }
    .hide { display : none; }
    /* ]]> */
    </style> 
    <script type="text/javascript">
    /* <![CDATA[ */
    var updateOption = function( sel ) {
    var sel;
    var xElem = ( function( xID ) {
    var xID = xID || 0;
       if ( xID ) {
          (( xID = document.getElementById( xID )) ? xID : xID = document.all[ xID ] );
          return xID;
       } return false;
    } );
       if ( typeof sel === "object" ) 
          sel = sel; 
       else
          sel = xElem( sel );
       var index = sel.selectedIndex;
       var selVal = sel.options[ index ].value || sel.value;
       var val;
       var xLabel;
       var radio;
       var div = xElem( "dynamic" );
       var checkedItem = xElem( "content" );
       var items = ( { } );
       items[ index ] = { 
          1 : selVal + ' <span style="color : #190;">choice #1</span>',
          2 : selVal + ' <span style="color : #190;">choice #2</span>'  
       }; if ( items[ index ] && index ) {
          for ( label in items[ index ] ) {
             val = String( items[ index ][ label ] );
             xLabel = String( "option" + label );
             radio = String( "r" + label );
             xElem( radio ).value = String( val.split(/<[\w\W]+>/)[ 0 ] + "choice #" + label );
             xElem( radio ).onclick = ( function() {
                if ( this.checked ) {
                   checkedItem.className = "show";
                   xElem( "txt" ).value = this.value;
                return;
                } checkedItem.className = "hide";
                   xElem( "txt" ).value = "";
             } )
             xElem( xLabel ).innerHTML = val;
          } 
          div.className = "show";
       return;
       } div.className = "hide";
    };
    /* ]]> */
    </script>
    </head>
    <body>
    <div id="main">
    <form id="testform" name="testform" action="mysql.php" method="post" onsubmit="return validateForm( this.id );" >
    <table id="table" frame="void" rules="none" summary="Javascript: Live Demo!">
    <tr>
    <td>Select Employee Type:</td>
    <td><select id="sType" name="sType" size="1" onchange="updateOption( this.id );">
    <option value="Please select an employee type:">Please select an employee type:</option>
    <option value="Department Transfer">Department Transfer</option>
    <option value="Previous Student">Previous Student</option>
    <option value="Physician / P.A.">Physician / P.A.</option>
    <option value="Volunteer">Volunteer</option>
    <option value="Update Employee">Update Current Employee</option>
    <option value="New Employee">New Employee</option>
    </select></td>
    <td style="text-align : left;width : 30%"><div id="dynamic" class="hide"><b>1.</b> <span id="option1"></span> <input type="radio" id="r1" name="rad" value="" /><br /><br /><b>2.</b> <span id="option2"></span> <input type="radio" id="r2" name="rad" value="" /><div id="content" class="hide" style="margin-top:1em">
    <label for="txt">Selected Employee Type:
     <input style="border : 1px solid #ccc; height : 30px; letter-spacing : 2px; color : #aaa; text-align : center; width : 98%;" type="text" id="txt" name="txt" value="" /></label></div></div>
    </td>
    <td style="text-align : right; width : 20%"><input type="submit" value="- submit -" /></td>
    </tr>
    </table>
    </form>
    </div>
    </body>
    </html>
    hope it helps...

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •