Отображение / скрытие элементов формы на основе выбора меню - PullRequest
Новая
       27

Отображение / скрытие элементов формы на основе выбора меню

0 голосов
/ 29 октября 2009

Я пытаюсь запрограммировать (изучая JQuery) следующее:

У меня есть форма с различными элементами. Основываясь на выборе, сделанном с помощью пункта меню select, я хочу, чтобы один или несколько элементов были либо скрыты, либо показаны У меня это так далеко, как сценарий: 

  // 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;
                }
            }
        });
    }
}

Это форма: 

    <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>

и это мой CSS: 

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

Пока это не работает. Я ценю любую помощь, которую мне может дать.

Dave

Ответы [ 3 ]

1 голос
/ 29 октября 2009

Способ написания jQuery, который будет выглядеть примерно так: 

$(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;
        }
    });

});

Чтобы остаться с использованным вами литеральным шаблоном объекта, это будет что-то вроде 

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;
            }
        });

    });
  }
}

и тогда вы будете звонить joinApp.ready(); на вашей странице

1 голос
/ 29 октября 2009

Первая проблема в первых двух строках события click () . В полях выбора должно использоваться событие change () . Кроме того, на следующей строке вы пытаетесь получить значение выбранного параметра. Это захватывается с помощью val () , тогда как text () возвращает значение между и . 

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

Наконец, я не увидел, где вы инициализировали, позвонив по номеру joinApp.ready();. Это где-то еще в вашем документе?

0 голосов
/ 29 октября 2009

Когда вы используете .click () для выбора, он не будет срабатывать при выборе элемента, потому что эти элементы не находятся в поле выбора. Попробуйте использовать .change () вместо .click (с тем же материалом, что и у вас). Кроме того, вместо использования этого: 

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

Сделайте это: 

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