Javascript Form Expansion

Posted on 2008-11-04
Last Modified: 2010-04-21
I am looking to create a form that expands when a checkbox is clicked. The form I am making is for a conference center. There is a checkbox that states "Full Service." If the checkbox is checked I want the form to expand to include other options. For example if checked I want the form to expand and have checkboxes for "Projector," "Drinks," "Microphone," etc. What is the best way to do this? Wouldn't Javascript be the best way and if so how would I do this? Would a lightbox be the best idea? Could this be done dynamically loading the expanded form using php?
Question by:NEComputer
    LVL 2

    Expert Comment

    are you trying to create a expand/collapse functionality using check box. if yes you could try placing the items inside a div, where everytime you trigger a expand/collapse. the div are shown or hide.

    LVL 1

    Author Comment

    I am not sure if that is exactly what I am creating because I need to collect the data from the form on whether or not the event is "full service." I have created an expand/collapse before using div and css show and hide. This however has been glitchy and don't know how best to create it. Any guidance?
    LVL 82

    Accepted Solution

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    <script language="JavaScript" type="text/javascript">
    function toggle(eid){
    	eid = document.getElementById(eid);
"" ? "none" : "";
    <input type="checkbox" name="service" value="Full Service" onclick="toggle('FullService')"/>Full Service
    <div id="FullService" style="display:none;">
    	<div><input type="checkbox" name="service" value="Projector"/>Projector</div>
    	<div><input type="checkbox" name="service" value="Drinks"/>Drinks</div>
    	<div><input type="checkbox" name="service" value="Microphone"/>Microphone</div>

    Open in new window

    LVL 1

    Author Closing Comment

    Thanks for the solution. It works great! I added some sytle to the form and things still work. If I understand it properly, whatever ID I give the control I give to the objects I want the change to apply to. Again I appreciate the support. Thank You.

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
    Part of the Global Positioning System A geocode ( is the major subset of a GPS coordinate (, the other parts being the altitude and t…
    Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now