Как сделать появляющееся поле в форме с помощью jQuery

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

Сам по себе скрипт очень простой, а html структура элементарная. Поэтому ограничусь лишь приведением листинга кода и работающим примером…

html структура

<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="&nbsp;" 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>

<!-- THIS DISPLAYS THE HIDDEN FIELD -->
<option value="otherField">Other</option>
</select>

<!-- BEGIN HIDDEN INPUT -->
<div id="otherField">
<label>This is my other option:</label>
<input type="text" name="otherField" class="textfield" />
</div>
<!-- END HIDDEN INPUT -->

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

jQuery код

$(document).ready(function() {
$.viewInput = {
'0' : $([]),
//THIS IS THE NAME OF THE DIV WRAPPING THE HIDDEN FIELD
'otherField' : $('#otherField'),
};

$('#otherFieldOption').change(function() {
// HIDES THE INPUT FIELD IF ANOTHER DROPDOWN ITEM IS SELECTED ONCE THE HIDDEN FIELD IS LOADED
$.each($.viewInput, function() { this.hide(); });
// SHOWS THE INPUT FIELD ITEM IF SELECTED
$.viewInput[$(this).val()].show();
});

});

css стили

Ну и напоследок приукрасим нашу форму с помощью css стилей:

/* SET THE HIDDEN INPUT FIELD IN A DIV */

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

Вот собственно говоря и все. Пользуйтесь.

h++p://tutsvalley.ru/js/jquery/jquery-hidden-form-input.html

1 комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*


три × два =