Добавление элемента формы при выборе SELECT
Добрый день.
На форме есть выпадающий список. Как сделать, чтобы при выборе элемента "Другая сумма" на той же форме появлялся новый input куда эту сумму можно было ввести вручную?
<form method="post" name="form" enctype="multipart/form-data" action="/send.php">
<select id="fils" name="price" required>
<option value="">Укажите сумму</option>
<option value="100">100 руб.</option>
<option value="200">200 руб.</option>
<option value="300">300 руб.</option>
<option value="500">500 руб.</option>
<option value="other">Другая сумма</option>
</select>
</form>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#summ {
display: none;
}
</style>
<script type='text/javascript'>
$(function (){
$('#fils').change(function(){
var o=$('#summ');
if (this.value=='other') {
o.show();
} else {
o.hide();
};
});
});
</script>
</head>
<body>
<form method="post" name="form" enctype="multipart/form-data" action="/send.php">
<select id="fils" name="price" required>
<option value="">Укажите сумму</option>
<option value="100">100 руб.</option>
<option value="200">200 руб.</option>
<option value="300">300 руб.</option>
<option value="500">500 руб.</option>
<option value="other">Другая сумма</option>
</select>
<input id='summ' type='texp' />
</form>
</body>
</html>
|
Спасибо! Работает.
Подскажите ещё как сделать это появляющееся поле обязательным? Если я просто напишу ему параметр required, то оно не даёт отправить форму при выборе любого другого значения из списка. Как это сделать скриптом? |
Цитата:
Или ставить/убирать у того поля "параметр required"... Можно вообще поле удалять... А потом его добавлять сразу с "параметр required". |
Сделал так:
$(function (){
$('#fils').change(function(){
var o=$('#summ');
if (this.value=='other') {
o.show();
o.attr('required', 'required');
} else {
o.hide();
o.removeAttr('required');
};
});
});
Вроде работает. Спасибо за помощь. |
Цитата:
|
| Часовой пояс GMT +3, время: 20:42. |