SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Make a form field appear upon selection of another?

    Hi, I'm looking for a method of making a form field appear (namely a textbox) upon selection of a particular checkbox in a form field.

    I'm able to do it from a dropdown menu item, but how do you do it with checkboxes?

    Code:
    <script type="text/javascript">
    function pmcCourses_showfield(name)
    {
    if(name=='Other')document.getElementById('pmcCourses_other').innerHTML='Please describe: <input type="text" name="other" />';
    else document.getElementById('pmcCourses_other').innerHTML='';
    }
    </script>
    <p> <label for="option1">ALERT Facilitation</label>
    <input name="option1" type="checkbox" id="option1" value="ALERT Facilitation"><br />
    <label for="option2">Other</label>
    <input name="option2" type="checkbox" id="option2" value="Other" onselect="pmcCourses_showfield(this.options[this.selectedIndex].value)"><br /> 
    <div id="pmcCourses_other"></div> </p>
    Thanks.
    Personal Portfolio
    Paul O'B is the CSS god

  2. #2
    SitePoint Evangelist gollux's Avatar
    Join Date
    Feb 2005
    Location
    Oregon, USA
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Javascript

    Code:
    /* Toggle form Checkout.SHOWSHIPBLOCK                       */
    /* Shipping Address Block display depending on CheckBox */
    
    function toggleShipAddressBlock() {
    	if (document.Checkout.SHOWSHIPBLOCK.checked) {
    		document.getElementById('shipaddressblock').style.display = 'none';
    		} else {
    		document.getElementById('shipaddressblock').style.display = 'block';
    		}
    }
    Form

    Code:
    <input name="SHOWSHIPBLOCK" checked="checked" value="1" id="SHOWSHIPBLOCK" onclick="toggleShipAddressBlock();" type="checkbox">
    
    <div style="display: block;" id="shipaddressblock">
    <!-- Shipping Address Entry Fields Here -->
    </div>
    Released under the Fiasco Labs Digital Damnation Copywright,
    it's yours to make whatever the 7734 you want with it.

    (c) 2005 Fiasco Labs All Wrongs Reserved

  3. #3
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I think I get it, except I'm having trouble with the "path" to the checkbox ... and yes I'm a js beginner

    I'm not sure that document.registration.pmcCourses.checked is correct ... is there a good way to find the exact path of an object for javascript if its somewhat deep in the document? This is just my guess to the problem ...

    Code:
    <script type="text/javascript">
    function pmcCourses_showfield(){
    if (document.registration.pmcCourses.checked)document.getElementById('pmcCourses_other').innerHTML='Please describe: <input type="text" name="other" />';
    else document.getElementById('pmcCourses_other').innerHTML='';
    }
    </script>
    Personal Portfolio
    Paul O'B is the CSS god


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
  •