Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.01.2017, 12:38
Новичок на форуме
Отправить личное сообщение для orangebox Посмотреть профиль Найти все сообщения от orangebox
 
Регистрация: 16.04.2014
Сообщений: 8

Добавление элемента формы при выборе 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>
Ответить с цитированием
  #2 (permalink)  
Старый 10.01.2017, 13:29
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от orangebox
Как сделать, чтобы при выборе элемента "Другая сумма" на той же форме появлялся новый input куда эту сумму можно было ввести вручную?
Как вариант...

<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 10.01.2017, 16:24
Новичок на форуме
Отправить личное сообщение для orangebox Посмотреть профиль Найти все сообщения от orangebox
 
Регистрация: 16.04.2014
Сообщений: 8

Спасибо! Работает.

Подскажите ещё как сделать это появляющееся поле обязательным? Если я просто напишу ему параметр required, то оно не даёт отправить форму при выборе любого другого значения из списка. Как это сделать скриптом?
Ответить с цитированием
  #4 (permalink)  
Старый 10.01.2017, 16:41
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от orangebox
Как это сделать скриптом?
Перехватывать отправку формы... Проверять заполняемость полей...

Или ставить/убирать у того поля "параметр required"...

Можно вообще поле удалять... А потом его добавлять сразу с "параметр required".
Ответить с цитированием
  #5 (permalink)  
Старый 10.01.2017, 17:26
Новичок на форуме
Отправить личное сообщение для orangebox Посмотреть профиль Найти все сообщения от orangebox
 
Регистрация: 16.04.2014
Сообщений: 8

Сделал так:

$(function (){
	$('#fils').change(function(){
		var o=$('#summ');
		if (this.value=='other') {
			o.show();
			o.attr('required', 'required');
		} else {
			o.hide();
			o.removeAttr('required');      
		};
	});
});


Вроде работает. Спасибо за помощь.
Ответить с цитированием
  #6 (permalink)  
Старый 11.01.2017, 08:29
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от orangebox
Вроде работает.
А куда оно денется!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
добавлять type="text" при выборе option ignoramus Элементы интерфейса 5 29.04.2014 15:22
Как отменить событие onchange при отправке формы? Petja Элементы интерфейса 1 10.04.2014 18:10
Вывод select'а при выборе нужного option'a из другого select'a CoRviN88 Элементы интерфейса 2 07.05.2013 13:24
при выборе в 1-ом select соот.-щая инф. отображается в другом select celencer Общие вопросы Javascript 1 24.05.2009 20:38
раскрывать/скрывать <td> при выборе определенного элемента списка zip Элементы интерфейса 2 19.01.2009 13:58