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

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

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

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

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

demosourse

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.skyrocketlabs.com
Перевел: Максим Шкурупий
Урок создан: 3 Марта 2010
Просмотров: 52188
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 3 Марта 2010 17:42
    RUDO
    Супер! Как раз то, что и нужно!
  • 3 Марта 2010 18:11
    Kolian
    о, спасибо, только вот на днях нужно было подобное сделать..
  • 3 Марта 2010 19:29
    НеБот
    Афигеть, выучили слово hide... Можно было и красивее показать/спрятать...
  • 4 Марта 2010 14:29
    IIIDimaIII
    я конечно извеняюсь, что не по теме, но я слыхал что есть скрипт который уменьшает нагрузку на wordpress в 100(!!!) раз, возможно ли такое..???
  • 4 Марта 2010 14:30
    IIIDimaIII
    Да, кстати урок хороший...
  • 4 Марта 2010 15:32
    Zver
    Не серьезный урок, проще было сделать без jQuery, чисто JS...
  • 4 Марта 2010 17:01
    Андрей
    Отлично, спасибо!
  • 4 Марта 2010 23:51
    OmnesOmnibus
    не могли бы Вы по подробнее объяснить код jQuery! Спасибо
  • 6 Марта 2010 13:37
    politaev
    спасибо большое!!! УЖЕ внедрил в свой сайт!
  • 17 Марта 2010 18:12
    Илларион
    Ну вот это уж точно можно сделать без jQuery! Зачем усложнять код, если и так всё до тупости просто!
  • 19 Марта 2010 16:54
    politaev
    а кто нибудь подскажет как можно вместе со скрытым меню передать переменную или что то вроде?? нужно сделать запрос в mysql...т.е. один "<option>Select...</option>" ---- один запрос... моно вручную сделать.... но во только запросов больше 100...
  • 27 Марта 2010 20:58
    Максим
    Часто бывает нужно показывать в форме дополнительный вопрос после выбора radio-кнопки. Может, кто подскажет, как код изменить под этот тип поля?
  • 21 Июля 2010 12:58
    lglglg
    в ие неработает. как исправить?
  • 5 Декабря 2010 18:44
    Glavar
    А как сделать что б при итем 1 выпадал озер оптионс 1. при итем 2 выпадал озер оптионс 2 и т.п.
  • 26 Января 2011 00:19
    Артем Чуб
    не появилось новое поле, что может быт нетак?
  • 13 Августа 2011 12:58
    waltside
    То что искал! Спасибо
  • 13 Января 2012 01:10
    SashaKKKKK
    Спасибо
  • 13 Января 2012 01:58
    SashaKKKKK
    Помогите сделать если стоит селект то поле было видно сразу после обновления страницы. И в ие у меня не работает. Я использую так:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>	<script>
    $(document).ready(function() { $.viewInput = { '0' : $([]),	//Это имя DIV вокруг невидимого поля '2' : $('#er'), '3' : $('#er2'), '4' : $('#er3'), '5' : $('#er4'), };
    $('#marry').change(function() { // Прячет это поле, если выбрана другая опция $.each($.viewInput, function() { this.hide(); });	// Показывает поле при выборе необходимой опции $.viewInput[$(this).val()].show(); });
    });
    </script>
    <style>
    #er { display: none;
    }
    #er2 { display: none;
    }
    #er3 { display: none;
    }
    #er4 { display: none;
    }
    input:focus, select:focus { border: 1px solid #ccc;
    }
    label { display: block; margin: 10px 20px 10px 0; padding: 10px 0 0 0; clear: left;
    }
    fieldset { width: 290px; margin: 0; padding: 20px; background: #f4f4f4; border: 1px solid #ddd;
    }
    .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;
    }
    .btn, .btn:focus { display: block; font: bold 1.0em arial,verdana,tahoma,sans-serif; color: #333; text-decoration: none; margin: 0; padding: 3px 5px;
    }
    </style>	<select id="marry" name="marry" style="float:left;">	<!--{if $space[sex]==1}-->	<option value="0"$marryarr[0]>Не выбрано</option>	<option value="2"$marryarr[2]>Есть подруга</option>	<option value="3"$marryarr[3]>Помолвлен</option>	<option value="4"$marryarr[4]>Женат</option>	<option value="5"$marryarr[5]>Влюблен</option>	<option value="6"$marryarr[6]>В поиске</option>	<!--{else}-->	<option value="0"$marryarr[0]>Не выбрано</option>	<option value="2"$marryarr[2]>Есть друг</option>	<option value="3"$marryarr[3]>Помолвлена</option>	<option value="4"$marryarr[4]>В браке</option>	<option value="5"$marryarr[5]>Влюблена</option>	<option value="6"$marryarr[6]>Влюблена</option>	<!--{/if}-->	</select>	<div id="er">	<label><!--{if $space[sex]==1}-->Имя подруги<!--{else}-->Имя друга<!--{/if}-->:</label>	<input type="text" name="fie_2" class="t_input" style="float:left;width: 150px;" value="<!--{eval echo stripslashes($space['field_5']);}-->"/>	</div>	<div id="er2">	<label>С кем помолвлены:</label>	<input type="text" name="fie_3" class="t_input" style="float:left;width: 150px;" value="<!--{eval echo stripslashes($space['field_5']);}-->"/>	</div>	<div id="er3">	<label><!--{if $space[sex]==1}-->Имя жены<!--{else}-->Имя мужа<!--{/if}-->:</label>	<input type="text" name="fie_4" class="t_input" style="float:left;width: 150px;" value="<!--{eval echo stripslashes($space['field_5']);}-->"/>	</div>	<div id="er4">	<label><!--{if $space[sex]==1}-->Имя любимой<!--{else}-->Имя любимого<!--{/if}-->:</label>	<input type="text" name="fie_5" class="t_input" style="float:left;width: 150px;" value="<!--{eval echo stripslashes($space['field_5']);}-->"/>	</div>
  • 9 Февраля 2013 21:01
    alexmage
    все работает, но вопрос - при пересылке методом post - в значение из раскрывающегося списка - записывается не текст из "скрытого поля", а имя тега в котором он находится. как исправить этот нюанс?
^ Наверх ^