Showing /hiding elements of a form based on menu selection

Question

I am trying to program (while learning JQuery) the following:

I have a form with various elements in it. Based on a selection made with a select menu item, I want one or more elements to either be hidden or shown. I have this so far as a script:

  // JavaScript Document
var joinApp = {
    ready : function() {
     var selApp = 'institution'
     $('select#appType').click(function() {
      var selApp = $("#appType :selected").text();

      switch ($selApp) {
       case 'institution':
       {
        $('li#attachFile').addClass('turnOn');
        break;
       }

       case 'individual':
       {
        $('li#attachFile').removeClass('turnOn').addClass('turnOff');
        $('li#beac_rep').addClass('turnOff');
        $('li#instit_name').addClass('turnOff');
        break;
       }

       case 'associate':
       {
        $('li#instit_name').removeClass('turnOff').addClass('turnOn');
        break;
       }
      }
     });
    }
}

This is the form:

    <form action="javascript:void(0);" method="post" enctype="multipart/form-data" class="clean" id="joinApp">
  <ol>

    <li>
      <fieldset>
        <legend>beac membership</legend>
        <ol>
        <li>
            <label for="date">date: <span class="alert">*</span></label>
            <input type="text" id="date" name="date" value="" />
        <script language="JavaScript">
    new tcal ({
     // form name
     'formname': 'join',
     // input name
     'controlname': 'date'
    });

    </script></li>
    <li>
            <label for="appType">choose membership type: <span class="alert">*</span></label>
            <select name="appType" id="appType">
              <option value="institution" id="instit">Institution</option>
              <option value="individual" id="individ">Individual</option>
              <option value="associate" id="assoc">Associate</option>
            </select>
          </li>
          <li id="instit_name">
            <label for="instit_name">name of institution/company: <span class="alert">*</span></label>
            <input type="text" id="instit_name" name="instit_name" value="" />
          </li>
          <li>
            <label for="address1">address:</label>
            <input type="text" id="address1" name="address1" value="" />
          </li>
          <li>
            <label for="address2">address 2:</label>
            <input type="text" id="address2" name="address2" value="" />
          </li>
          <li>
            <label for="city">city:</label>
            <input type="text" id="city" name="city" value="" />
          </li>
         <li>
            <label for="pcode">postal code:</label>
            <input type="text" id="pcode" name="pcode" value="" />
          </li>
          <li>
            <label for="prov">province or territory:</label>
            <select name="prov" id="prov">
              <option selected="selected">-- select province or territory --</option>
              <option value="Alberta">Alberta</option>
              <option value="British Columbia">British Columbia</option>
              <option value="Manitoba">Manitoba</option>
              <option value="New Brunswick">New Brunswick</option>
              <option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
              <option value="Northwest Territories">Northwest Territories</option>
              <option value="Nova Scotia">Nova Scotia</option>
              <option value="Nunavut">Nunavut</option>
              <option value="Ontario">Ontario</option>
              <option value="Prince Edward Island">Prince Edward Island</option>
              <option value="Québec">Québec</option>
              <option value="Saskatchewan">Saskatchewan</option>
              <option value="Yukon">Yukon</option>
            </select>
          </li>
          <li>
            <label for="areacode">areacode:</label>
            <input type="text" id="areacode" name="areacode" value="" />
          </li>
          <li style="">
            <label for="phone">phone:</label>
            <input type="text" id="phone" name="phone" value="###-###-####" />
          </li>
          <li>
            <label for="phone_ext">phone ext:</label>
            <input type="text" id="phone_ext" name="phone_ext" value="" />
          </li>
          <li>
            <label for="fax">fax:</label>
            <input type="text" id="fax" name="fax" value="" />
          </li>
          <li id="beac_rep">
            <label for="instit_rep">BEAC rep name:</label>
            <input type="text" id="instit_rep" name="instit_rep" value="" />
          </li>
          <li>
            <label for="title">title:</label>
            <input type="text" id="title" name="title" value="" />
          </li>
          <li>
            <label for="PHORM_FROM">email: <span class="alert">*</span></label>
            <input name="PHORM_FROM" type="text" id="PHORM_FROM" value="" />
          </li>
          <li>
            <label for="instit_web">institutional web site:</label>
            <input type="text" id="instit_web" name="instit_web" value="" />
          </li>
          <li id="attachFile">
            <label for="attach">attach document:</label>
            <input type="file" name="attach" id="attach" />
          </li>
        </ol>
      </fieldset>
    </li>
  </ol>

    <input type="reset" value="CANCEL" />
    <input type="submit" value="OK" />

</form>

and this is my CSS:

li#attachFile     { display: block; }
form#joinApp li.turnOff { display: none; }
form#joinApp li.turnOn { display: block; }

So far, this is not functioning. I appreciate any help anyone can give me.

Dave

Answer 1

First issue is on the first two lines of the click() event. Select boxes must utilize the change() event. Also, on the next line, you are attempting to get the value of the selected option. This is grabbed using val(), whereas text() retrieves the value between and .

$('#appType').change(function() {
    var selApp = $(this).val();

Lastly, I didn't see where you initialized by calling joinApp.ready();. Is this elsewhere in your document?

Answer 2

When you use .click() on the select, it won't get triggered when an item is selected because those items are not within the box of the select. Try using .change() instead of .click (with the same stuff you have in there). Also, instead of using this:

var selApp = $("#appType :selected").text();

Do this:

var selApp = $("#apptype:selected").val();

Answer 3

The jQuery way of writing that would be something like

$(function() {

    $('#appType').change(function() {
        switch ($(this).val()) {
            case 'institution':
                $('#attachFile').addClass('turnOn');
                break;
            case 'individual':
                $('#attachFile').removeClass('turnOn').addClass('turnOff');
                $('#beac_rep, #instit_name').addClass('turnOff');
                break;
            case 'associate':
                $('#instit_name').removeClass('turnOff').addClass('turnOn');
                break;
        }
    });

});

To remain with the object literal pattern that you have used, it would be something like

var joinApp = {
  ready : function() {
    $(function() {

        $('#appType').change(function() {
            switch ($(this).val()) {
                case 'institution':
                    $('#attachFile').addClass('turnOn');
                    break;
                case 'individual':
                    $('#attachFile').removeClass('turnOn').addClass('turnOff');
                    $('#beac_rep, #instit_name').addClass('turnOff');
                    break;
                case 'associate':
                    $('#instit_name').removeClass('turnOff').addClass('turnOn');
                    break;
            }
        });

    });
  }
}

and then you would call joinApp.ready(); in your page