SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Enable/disable form element based on <select> choice

    Is there any way to enable a form element(s) based on the selection in a <select> drop-down? I'm trying to enable/disable a group of checkboxes depending on which option is chosen in the <select> above it.

    I know how to enable/disable something when a box is checked (or text is entered into it) but I have no clue how to handle the <select> option.
    <cfset myblog = "http://cydewaze.org/">

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,710
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cydewaze View Post
    I know how to enable/disable something when a box is checked (or text is entered into it) but I have no clue how to handle the <select> option.
    Here's a simple form:

    Code javascript:
    <form id="userInfo">
        <p><label>Gender?
            <select name="gender">
                <option value="male">Male</option>
                <option value="female">Female</option>
            </select>
        </label></p>
        <p><label>Pregnant? <input type="checkbox" name="pregnant"></label></p>
    </form>

    Put your script at the bottom:

    Code html4strict:
    <html>
    <head>
    </head>
    <body>
    ...
    <script src="script.js"></script>
    </body>
    </script>

    Attach an onchange event to the select box:

    Code javascript:
    var form = document.getElementById('userInfo'),
        gender = form.elements.gender;
     
    gender.onchange = function () {
        ...
    };

    Disable the checkbox depending on the index of the selected option:

    Code javascript:
    gender.onchange = function () {
        var form = this.form;
        if (this.selectedIndex === 0) {
            form.elements.pregnant.disabled = true;
        } else {
            form.elements.pregnant.disabled = false;
        }
    };

    and finally, trigger the onchange event so that the checkbox updates when the page loads.

    Code javascript:
    gender.onchange();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Works awesome! Although the action is reversed, but that's easy to change.

    Now I just have to get it to work on multiple checkboxes (change from the customer) but I think I can make out how to do that.

    Thanks Paul!
    <cfset myblog = "http://cydewaze.org/">


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
  •