SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/hide div on dropdown

    I can write PHP all day but am just getting started with Javascript, jQuery, and clientside scripting in general. I'm trying to write a function that will show the div #genders when "Shared" is selected from a dropdown menu. In all other cases I want the div to be hidden.

    Here's what the HTML looks like

    Code:
    <label for="status">Property Status</label>
    <select name="status" id='selector' onChange='toggleShared();'>
    <option value="" selected="selected"></option>
    <option value="Shared">Shared</option>
    <option value="Vacant">Vacant</option>
    </select>
    
    <div id='genders' style='display:none;'>
    <label for="gender">Gender Preference</label>
    <select name="gender" id='genders'>
    <option value="No Preference">No Preference</option>
    <option value="Female">Female</option>
    <option value="Male">Male</option>
    </select></div>
    Here's some javascript/pseudo-code i came up with to try to get this to work but I haven't been able to so far. I'm using jQuery in another portion of the page so it is loaded in if it would be easier to write a jQuery function.

    Code:
    <script>
         function toggleShared() {
              selector = document.getElementById('selector');
              genders = document.getElementById('genders');
              if(selector.val() == 'Shared') {
                    genders.style.display = 'block';
              }
              else {
                    genders.style.display = 'none';
              }
         }
    </script>
    I appreciate any feedback!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There's trouble with your HTML code too, because the for attribute is connected with the id, not the name as you currently have.

    You can completely bypass those sorts of issues by wrapping the label around the form field instead.

    Code html4strict:
    <label>Property Status
        <select name="status">
            ...
        </select>
    </label>

    When scripting with forms, it's best to access the form via the form element itself, because that then gives you easy access to all of the form elements within it.

    Code html4strict:
    <form id="rentalProperties">
        <!-- Paragraphs are used for forms, which the upcoming HTML5 form specs help to clarify
            [url]http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#writing-a-form's-user-interface[/url] -->
        <p>
            <label>Property Status
                <select name="status">
                    <option value=""></option>
                    <option value="Shared">Shared</option>
                    <option value="Vacant">Vacant</option>
                </select>
            </label>
        </p>
        <p>
            <label>Gender Preference
                <!-- The gender select is not hidden at this stage, for that would be fatal for those who don't have scripting available
                    Notice too that no unique identifiers are required, except for on the form tag itself. They can be used for
                    other purposes such as styling, but with scripting things are more flexible and less restricted without them -->
                <select name="gender">
                    <option value="No Preference">No Preference</option>
                    <option value="Female">Female</option>
                    <option value="Male">Male</option>
                </select>
            </label>
        </p>
    </form>
    ...
    <script src="script.js"></script>
    </body>

    Code javascript:
    function toggleShared() {
        var form = this.form,
            status = form.elements.status,
            // Use gender's parent because we want the label to be hidden too
            gender = form.elements.gender.parentNode;
     
        // Start by giving the default nature of things, with gender hidden
        gender.style.display = 'none';
     
        // Now only show gender if applicable
        if (status.value == 'Shared') {
            // An empty string is more compatible than using 'block' or 'inline' as it allows the element to use its own default display type.
            gender.style.display = '';
        }
    }
     
    // connect the function to the selects onchange event
    var form = document.getElementById('rentalProperties');
    form.elements.status.onchange = toggleShared;
     
    // and lastly, trigger the onchange event, which causes the gender select to be hidden
    form.elements.status.onchange();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for your help it worked perfectly! I apologize for the delay in my response it's finals week for me and I've been quite busy.


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
  •