Изменение формы при выборе определенного параметра

Иногда, при разработке сайта, необходимо учесть некоторые нюансы.

К примеру недавно я столкнулся с такой задачей:
Есть форма заказа товара, у товара есть несколько параметров, которые должен заполнить Посетитель. При этом, для каждого типа товара есть свои особенные параметры, которые не учитываются для другого типа. После выбора типа товара пользователю должны быть выведены поля для заполнения под выбранный тип.

В данной статье я хочу показать, каким образом можно это реализовать.

Реализуется это, как вы уже наверное догадались, с помощью javascript. Рассмотрим простой пример, который я нашел на стороннем сайте:

<script language ="JavaScript">
<!--
function selChange(seln) {
selNum = seln.beer.selectedIndex;
Isel = seln.beer.options[selNum].text;
alert("Выбрано: "+Isel);
}
//-->
</script> 

<form>
Выберите марку пива:
<select name="beer" onChange="selChange(this.form)">
<option>Жигулевское
<option>Очаковское
<option>Бочкарев
<option>Красный восток
</select>
</form>

В данном примере используется параметр select‘a onChange. С помощью него, мы можем отследить, когда Посетитель выберет параметр из списка. Для нашего случая мы вызываем функцию selChange и передаем в нее текущую форму.

В функции, как мы видим, отслеживается текущее (после выбора) значение элемента с именем beer (в нашем случае это select). Значение (value) записывается в переменную, и потом вызывается алерт с текстом, где фигурирует эта переменная, для вывода выбранного типа.

Давайте теперь рассмотрим, адаптированный под мои нужды, вариант javascript-кода:

<script language ="JavaScript">
<!--
function Change(seln) {
selNum = seln.type.selectedIndex;
Isel = seln.type.options[selNum].text;

if (Isel=="Круглая"){
 $('#kvadr').hide("slow", function() {
 $('#round').show("slow");
 });
}else{
 $('#round').hide("slow", function() {
 $('#kvadr').show("slow");
 });
 }
}
//-->
</script>

У меня, как написано в начале поста, была задача вывода тех или иных полей для заполнения в зависимости от выбранного из выпадающего списка типа товара. Для выполнения моего кода еще необходимо подключить библиотеку jQuery, т.к. я использую в функции такие эффекты, как show и hide.

Все достаточно просто, как и в предыдущем варианте, просто после того как текущее значение записывается в переменную, оно сверяется с текстом и выполняется соответственная часть кода.

Вроде все. Скачать демо: change-form-with-select
Если у вас, мои уважаемые читатели, возникают вопросы — пишите, не стесняйтесь, отвечу в течении суток. Ждать не придется. 😉

Есть вопрос? Что-то не понятно в статье? Хочешь отблагодарить? Пиши комментарий!
Если тебе понравилась статья, а тем более если еще и помогла - поставь +1 и нажми "Мне нравится"!

(236 оценок, среднее: 4,80 из 5)

Tweet