Прячем \ Показываем поле формы с помощью jQuery

SLITE

В данном уроке Вы узнаете как создать поле в форме, которое будет доступно только после некоторых действий.

Это довольно интересное применение jQuery. Допустим у Вас есть форма, в которой есть поле, где пользователь может указать откуда он нашел Ваш сайт. В этом поле можно разместить выпадающий список с разными вариантами ответа.

Если ни один ответ их не удовлетворит, можно добавить поле "Другое". После выбора данного поля у пользователя всплывет дополнительное поле для ввода текста.

Ниже Вы можете увидеть все в действии, но после такого подробного объяснения, я думаю, можно даже туда не смотреть

XHTML разметка

Код: Выделить всё

<form id="myForm" method="post" action="#">
<fieldset>

<label>My name:</label>
<input type="text" name="Name" class="textfield" />

<label>My email address:</label>
<input type="text" name="EmailAddress" value=" " class="textfield" />

<label>Select 'Other' from this dropdown list:</label>
<select class="dropdown" name="Items" id="otherFieldOption">
<option>Select...</option>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>

<!-- Это отобразит наше спрятанное поле -->
<option value="otherField">Other</option>
</select>

<!-- Начало поля ввода -->
<div id="otherField">
<label>This is my other option:</label>
<input type="text" name="otherField" class="textfield" />
</div>
<!-- Конец -->

<input type="submit" name="Submit" value="Submit" class="btn" onclick="this.blur();" />
</fieldset>
</form>

jQuery

Код: Выделить всё

$(document).ready(function() {
  $.viewInput = {
    '0' : $([]),
	//Это имя DIV вокруг невидимого поля
    'otherField' : $('#otherField'),
  };

$('#otherFieldOption').change(function() {
    // Прячет это поле, если выбрана другая опция
    $.each($.viewInput, function() { this.hide(); });
	// Показывает поле при выборе необходимой опции
    $.viewInput[$(this).val()].show();
  });

});

CSS

Код: Выделить всё

#otherField {
  display: none;
}

/* FORM */

fieldset {
  width: 290px;
  margin: 0;
  padding: 20px;
  background: #f4f4f4;
  border: 1px solid #ddd;
}

label {
  display: block;
  font: bold 1.0em arial,verdana,tahoma,sans-serif;
  color: #444;
  margin: 0 20px 10px 0;
  padding: 0;
  clear: left;
}

.textfield, .dropdown {
  width: 200px;
  font: normal 1.0em arial,verdana,tahoma,sans-serif;
  color: #666;
  margin: 0 0 20px 0;
  padding: 5px 6px;
  background: #fff;
  border: 1px solid #ddd;
}

.dropdown {
  width: 215px;
}

input:focus, select:focus {
  border: 1px solid #ccc;
}

.btn, .btn:focus {
  display: block;
  font: bold 1.0em arial,verdana,tahoma,sans-serif;
  color: #333;
  text-decoration: none;
  margin: 0;
  padding: 3px 5px;
}

Вот и все готово! Данное решение может существенно сократить размер больших форм, если не все поля обязательны к заполнению.

Данный урок подготовлен для Вас командой сайта http://ruseller.com