Javascript, чтобы скрыть часть формы при смене переключателя

0

У меня есть нижняя html-форма и вам нужно написать javascript, чтобы скрыть разные части формы в зависимости от выбранной верхней кнопки.

<form action="" method="post">

    <label for="number">Number of guests: *
        <input name="number" type="radio" value="1" />1
        <input name="number" type="radio" value="2" />2
        <input name="number" type="radio" value="3" />3
        <input name="number" type="radio" value="4" />4
        <input name="number" type="radio" value="5" />5
    </lable>

    <div id="rsvp1">
        <label for="name">Name: *
            <input name="name" type="text" value="" />
        </label>

        <label for="attending">Attending?: *
            <input name="attending" type="radio" value="Yes" />Yes
            <input name="attending" type="radio" value="No" />No
        </label>
        <label for="dietary">Dietary Requirements?: *
            <input type="checkbox" name="dietary" value="veggie">Veggie<br>
            <input type="checkbox" name="dietary" value="allergies">Allergies (Please State)<br>
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies"></textarea>
        </label>



        <label for="notes">Notes (high chair/booster seat/childs meal/ etc.): *
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="notes"></textarea>
        </label>
    </div>

    <div id="rsvp2">
        <label for="name1">Name: *
            <input name="name1" type="text" value="" />
        </label>

        <label for="attending1">Attending?: *
            <input name="attending1" type="radio" value="Yes" />Yes
            <input name="attending1" type="radio" value="No" />No
        </label>
        <label for="dietary1">Dietary Requirements?: *
            <input type="checkbox" name="dietary1" value="veggie">Veggie<br>
            <input type="checkbox" name="dietary1" value="allergies">Allergies (Please State)<br>
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies1"></textarea>
        </label>



        <label for="notes1">Notes (high chair/booster seat/childs meal/ etc.): *
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="notes1"></textarea>
        </label>
    </div>

    <div id="rsvp3">
        <label for="name2">Name: *
            <input name="name2" type="text" value="" />
        </label>

        <label for="attending2">Attending?: *
            <input name="attending2" type="radio" value="Yes" />Yes
            <input name="attending2" type="radio" value="No" />No
        </label>
        <label for="dietary2">Dietary Requirements?: *
            <input type="checkbox" name="dietary2" value="veggie">Veggie<br>
            <input type="checkbox" name="dietary2" value="allergies">Allergies (Please State)<br>
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies2"></textarea>
        </label>



        <label for="notes2">Notes (high chair/booster seat/childs meal/ etc.): *
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="notes2"></textarea>
        </label>
    </div>

    <div id="rsvp4">
        <label for="name3">Name: *
            <input name="name3" type="text" value="" />
        </label>

        <label for="attending3">Attending?: *
            <input name="attending3" type="radio" value="Yes" />Yes
            <input name="attending3" type="radio" value="No" />No
        </label>
        <label for="dietary3">Dietary Requirements?: *
            <input type="checkbox" name="dietary3" value="veggie">Veggie<br>
            <input type="checkbox" name="dietary3" value="allergies">Allergies (Please State)<br>
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies3"></textarea>
        </label>



        <label for="notes3">Notes (high chair/booster seat/childs meal/ etc.): *
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="notes3"></textarea>
        </label>
    </div>

    <div id="rsvp4">
        <label for="name4">Name: *
            <input name="name4" type="text" value="" />
        </label>

        <label for="attending4">Attending?: *
            <input name="attending4" type="radio" value="Yes" />Yes
            <input name="attending4" type="radio" value="No" />No
        </label>
        <label for="dietary4">Dietary Requirements?: *
            <input type="checkbox" name="dietary4" value="veggie">Veggie<br>
            <input type="checkbox" name="dietary4" value="allergies">Allergies (Please State)<br>
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies4"></textarea>
        </label>



        <label for="notes4">Notes (high chair/booster seat/childs meal/ etc.): *
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="notes4"></textarea>
        </label>
    </div>
    <input name="submitted" type="hidden" value="1" />

    <input type="submit" />

</form>

Так, например, когда отображается 1 радиокнопка, будет показан только div rsvp1 (С скрытыми div 2, 3, 4 и 5). Когда будет нажата 2 переключателя, rsvp2 и 1 будут показаны и т.д.

Я знаю, что могу использовать:

   document.getElementById(rsvp1).style.visibility="visible";

Но как бы я установил скрипт для переключения с переключателем.

Это будет добавлено на сайт wordpress, если это имеет значение

  • 0
    getElementById (rsvp1) является опечаткой? это должен быть getElementById ('rsvp1')
  • 0
    Какие браузеры?
Показать ещё 1 комментарий
Теги:
forms

4 ответа

0
Лучший ответ

Один из подходов состоит в следующем:

function showRSVP() {
    // caching the changed element (whose change event called the function):
    var checked = this,

        // getting the value of that changed element, and changing it to a
        // number (in base-10):
        n = parseInt(checked.value, 10),

        // getting all the 'div' elements whose id starts with 'rsvp':
        rsvpElems = document.querySelectorAll('div[id^="rsvp"]'),

        // initialising a variable for use later:
        tmp;

    // iterating over the collection of elements we found earlier:
    for (var i = 0, len = rsvpElems.length; i < len; ++i){

        // storing the current element over which we're iterating:
        tmp = rsvpElems[i];

        // if i < n we're showing the rsvp element, otherwise we're hiding it:
        tmp.style.display = i < n ? 'block' : 'none';
    }
}

// getting all the inputs with type="radio" and name="number":
var radios = document.querySelectorAll('input[name="number"][type="radio"]');

// iterating over that collection:
for (var i = 0, len = radios.length; i < len; i++){
    // binding an change event-handler to those radio elements
    radios[i].addEventListener('change', showRSVP);
}

Демо-версия JS Fiddle.

Или вы можете использовать делегирование и привязать обработчик событий к родительскому элементу <label>:

function showRSVP(e) {
    // caching the changed-element (e is the event automagically passed
    // to the function), e.target is the element upon which the event
    // originated:
    var checked = e.target,
        n = parseInt(checked.value, 10),
        rsvpElems = document.querySelectorAll('div[id^="rsvp"]'),
        tmp;

    for (var i = 0, len = rsvpElems.length; i < len; ++i){
        tmp = rsvpElems[i];
        tmp.style.display = i < n ? 'block' : 'none';
    }
}

// getting a reference to the relevant 'label' element:
var label = document.querySelector('label[for="number"]');

// adding a change event-listener:
label.addEventListener('change', showRSVP);

Демо-версия JS Fiddle.

Рекомендации:

Поделиться
1

Это будет немного проще с библиотекой, например, jQuery. Во всяком случае, это достаточно легко с прямым javascript.

<input id="number1" name="number" type="radio" value="1" />1
<input id="number2" name="number" type="radio" value="2" />2
<input id="number3" name="number" type="radio" value="3" />3
<input id="number4" name="number" type="radio" value="4" />4
<input id="number5" name="number" type="radio" value="5" />5

<script type="text/javascript">
    for( var i = 1; i<6; i++) {
        document.getElementById('number'+i).onchange = function() {
            var index = parseInt(this.value);       
            for( var j = 1; j<6; j++)
              document
                .getElementById('rsvp'+j)
                   .style.display= j > index ? 'none':'block';

        };
    }   
</script>
Поделиться
  • 0
    Возможно, стоит упомянуть, что IE8 не поддерживает addEventListener. Я использовал onchange (или onclick) для обеспечения совместимости со старыми версиями IE. Любой, кто все еще работает на XP, не может перейти на IE9, который является первой версией IE, поддерживающей addEventListener.
  • 0
    Любой, кто все еще работает в XP, имеет более серьезные проблемы, чем неспособность использовать addEventListener() .
Показать ещё 1 комментарий
0

Вы ищете что-то вроде этого?

Реализовано с помощью vanila js.

FIDDLE

window.onload = function() {

    for (var i = 1; i <= 4; ++ i)
    {
        (function(index) {
          document.getElementById("radioSelector" + index).addEventListener('click', function(){
             for (var j = 1; j <=4; ++ j) {
               var rsvpElement = document.getElementById('rsvp' + j);
               if (j <= index){
                  rsvpElement.style.display = 'block';  
               } else {
                  rsvpElement.style.display = 'none';
               }

             }
          });
        })(i);
    }
}
Поделиться
  • 0
    Мне нравится это, но мне нужно отобразить, например, когда 3 нажата rsvp1 И rsvp2 И rsvp3
  • 0
    обновил ответ, это то, что вы ищете?
Показать ещё 6 комментариев
-4

используя jquery, вы можете:

$(#id).change(
     function () { 
         $('#rsvp1').hide(); 
      }
);
Поделиться
  • 0
    Почему отрицательные голоса есть лучший способ?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню