www.webdeveloper.com
Results 1 to 4 of 4

Thread: Changing web form on the fly

  1. #1
    Join Date
    Mar 2010
    Posts
    2

    Changing web form on the fly

    Hi, I need help figuring out how to Expand/Collapse a section of my web form using a check box. I have it halfway working so far. I have a hidden text box that displays when a check box is checked, but I have no clue how to get it to hide the text box again when the box is UN-checked. Here is the code I have so far including the CSS I used to hide the text area.

    ...
    <style type="text/css">
    <!--
    #buildrequest {
    display: none;
    }
    -->
    </style>
    ...
    <input name="build_request" type="checkbox" class="indent" id="build_request" onClick="document.getElementById('buildrequest').style.display='inline';"/>
    <br />
    <div id="buildrequest">
    Tell us about your perfect build
    <br />
    <textarea class="formoutline" name="build_info" cols="45" rows="3" wrap="physical" id="build_info"></textarea></div>


    Any help would be greatly appreciated.

  2. #2
    Join Date
    Mar 2010
    Posts
    29
    Hi, simple ...

    Instead of a command at "onclick" (lowercase, pls!), call a javascript function and check "style" of buildrequest. If "hidden" (I prefer "display:none", so no space (reserved!) is lost), "visible" ... if "visible", hide it ...

    Greetings,
    SteelWheel

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    I changed your onclick JS to be a call to a function where you pass the current status of your checkbox. The status will be either true or false depending on whether your checkbox is checked or not.

    The function then displays or hides the textarea depending on the value of status.

    Code:
     
    <!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>
    <title></title>
    <style type="text/css">
    #buildrequest {
    display: none;
    }
    </style>
    <script type="text/javascript">
    function showHideTextbox(status) {
     if(status) {
         document.getElementById("buildrequest").style.display="block";
     } else {
         document.getElementById("buildrequest").style.display="none";
        }
    }
    </script>
    
    </head>
    <body>
    <div>
    <input name="build_request" type="checkbox" class="indent" id="build_request" onClick="showHideTextbox(this.checked);"/>
    </div>
    <div id="buildrequest"> 
    Tell us about your perfect build
    <br />
    <textarea class="formoutline" name="build_info" cols="45" rows="3" wrap="physical" id="build_info"></textarea></div>
    
    </body>
    </html>
    Last edited by tirna; 03-25-2010 at 06:40 AM.

  4. #4
    Join Date
    Mar 2010
    Posts
    2
    Thank you so much for the help! I'm new to all this Javascript stuff. This is exactly what I was looking for.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles