Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.06.2015, 23:10
Аспирант
Отправить личное сообщение для Daniel93 Посмотреть профиль Найти все сообщения от Daniel93
 
Регистрация: 21.02.2015
Сообщений: 37

Изменение формы в зависимости от select
Доброго времени суток! Возникла такая проблема.

Я хочу, чтобы форма менялась в зависимости от того, какой select был выбран

Например,
<form action="handler/education.php" method="POST" id='form_pc' name="law_pc">
								<select name="type_device" id="law_type">
									<option value="Составление дарственных, завещаний ">Составление дарственных, завещаний </option>
									<option value="Составление договоров (купли-продажи, аренды, подряда)">Составление договоров (купли-продажи, аренды, подряда)</option>
									<option value="Риелторские услуги">Риелторские услуги</option>
									<option value="Защита прав потребителей">Защита прав потребителей</option>
									<option value="Помощь в оформлении ИП">Помощь в оформлении ИП</option>
									<option value=" Переустройство и перепланировка "> Переустройство и перепланировка </option>
									<option value=" Составление жалоб в прокуратуру, суды и др.  ">  Составление жалоб в прокуратуру, суды и др. </option>
								</select><br />
								<label class="">Ваше имя:</label><br />
								<input name="law_name" type="text" id="pc_name" size="36"><br />
								<label class="">Ваша фамилия:</label><br />
								<input name="law_sname" type="text" id="pc_sname" size="36"><br />
								<label class="">Номер телефона:</label><br />
								<input name="law_telephone" type="text" id="pc_telephone" size="36"><br />
								<label class="">Ваш адрес:</label><br />
								<input name="law_add" type="text" id="pc_add" size="36"><br />
								
								<input type="submit" name="education_send" class="btn btn-large btn-primary" value="Отправить заявку">
							</form>


Это первая форма, которая появляется на странице

<form action="handler/education.php" method="POST" id='form_pc_agreement' name="law_pc" style="display:none">
								<select name="type_device" id="law_type">
									<option value="Составление дарственных, завещаний ">Составление дарственных, завещаний </option>
									<option value="Составление договоров (купли-продажи, аренды, подряда)">Составление договоров (купли-продажи, аренды, подряда)</option>
									<option value="Риелторские услуги">Риелторские услуги</option>
									<option value="Защита прав потребителей">Защита прав потребителей</option>
									<option value="Помощь в оформлении ИП">Помощь в оформлении ИП</option>
									<option value=" Переустройство и перепланировка "> Переустройство и перепланировка </option>
									<option value=" Составление жалоб в прокуратуру, суды и др.  ">  Составление жалоб в прокуратуру, суды и др. </option>
								</select><br />
								<label class="">Ваше имя (заполнение договоров):</label><br />
								<input name="law_name" type="text" id="pc_name" size="36"><br />
								<label class="">Ваша фамилия:</label><br />
								<input name="law_sname" type="text" id="pc_sname" size="36"><br />
								<label class="">Номер телефона:</label><br />
								<input name="law_telephone" type="text" id="pc_telephone" size="36"><br />
								<label class="">Ваш адрес:</label><br />
								<input name="law_add" type="text" id="pc_add" size="36"><br />
								<input type="submit" name="education_send" class="btn btn-large btn-primary" value="Отправить заявку">
							</form>


Вторая форма

<form action="handler/education.php" method="POST" id='form_pc_realtor' name="law_pc" style="display:none">
								<select name="type_device" id="law_type">
									<option value="Составление дарственных, завещаний ">Составление дарственных, завещаний </option>
									<option value="Составление договоров (купли-продажи, аренды, подряда)">Составление договоров (купли-продажи, аренды, подряда)</option>
									<option value="Риелторские услуги">Риелторские услуги</option>
									<option value="Защита прав потребителей">Защита прав потребителей</option>
									<option value="Помощь в оформлении ИП">Помощь в оформлении ИП</option>
									<option value=" Переустройство и перепланировка "> Переустройство и перепланировка </option>
									<option value=" Составление жалоб в прокуратуру, суды и др.  ">  Составление жалоб в прокуратуру, суды и др. </option>
								</select><br />
								<label class="">Ваше имя (риелтор):</label><br />
								<input name="law_name" type="text" id="pc_name" size="36"><br />
								<label class="">Ваша фамилия:</label><br />
								<input name="law_sname" type="text" id="pc_sname" size="36"><br />
								<label class="">Номер телефона:</label><br />
								<input name="law_telephone" type="text" id="pc_telephone" size="36"><br />
								<label class="">Ваш адрес:</label><br />
								<input name="law_add" type="text" id="pc_add" size="36"><br />
								<input type="submit" name="education_send" class="btn btn-large btn-primary" value="Отправить заявку">
							</form>


Третья форма

Вот когда jQuery
$('#law_type').on('change', function() {
		var type = $("#law_type option:selected").val();
		//alert(type);
		
		switch (type) {
			case 'Составление дарственных, завещаний':
			alert ("Выбрали первое");
			break;
			
			case 'Составление договоров (купли-продажи, аренды, подряда)':
			alert ("Выбрали второе");
			$('#form_pc').css('display','none');
			$('#form_pc_agreement').css('display','block');
			break;
			
			case 'Риэлторские услуги':
			alert ("Выбрали третье");
			$('#form_pc').css('display','none');
			$('#form_pc_agreement').css('display','none');
			$('#form_pc_realtor').css('display','block');
			break;
		}
		
	}); // Конец функции


Данный код работает, но всего один раз. Например, я выбираю
Код:
Составление договоров (купли-продажи, аренды, подряда)':
форма изменяется. Находясь в новой форме, нажимаю
Код:
риэлторские услуги
ничего не происходит. А если сразу выберу риэлторские услуги, то форма изменить, обратно уже нет

Заранее извиняюсь, если коряво описал проблему
Ответить с цитированием
  #2 (permalink)  
Старый 17.06.2015, 23:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

Daniel93,
id уникально -- меняйте на класс
Сообщение от Daniel93
$('#law_type').
Ответить с цитированием
  #3 (permalink)  
Старый 18.06.2015, 01:03
Аспирант
Отправить личное сообщение для Daniel93 Посмотреть профиль Найти все сообщения от Daniel93
 
Регистрация: 21.02.2015
Сообщений: 37

рони,
Вот как изменил код
$('.law_types').on('change', function() {
		var type = $(".law_types option:selected").val();
		alert(type);


Но все равно проблема осталась. Или я что-то неправильно понял?
Ответить с цитированием
  #4 (permalink)  
Старый 18.06.2015, 01:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

Daniel93,
правильно -- но у вас ошибки где буквы перепутаны где пробелы -
да и
Сообщение от Daniel93
var type = $(".law_types option:selected").val();
type = this.value
Ответить с цитированием
  #5 (permalink)  
Старый 18.06.2015, 01:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

Daniel93,
тут то id сменили
select name="type_device" id="law_type">
Ответить с цитированием
  #6 (permalink)  
Старый 18.06.2015, 01:30
Аспирант
Отправить личное сообщение для Daniel93 Посмотреть профиль Найти все сообщения от Daniel93
 
Регистрация: 21.02.2015
Сообщений: 37

рони,
Да, изменил, но проблема осталась. Вот так сейчас выглядит jQuery

$('.law_types').on('change', function() {
		var type = $(".law_types option:selected").val();
		alert(type);
		
		switch (type) {
			case 'Составление дарственных, завещаний':
			alert ("Выбрали первое");
			break;
			
			case 'Составление договоров (купли-продажи, аренды, подряда)':
			alert ("Выбрали второе");
			$('#form_pc').css('display','none');
			$('#form_pc_agreement').css('display','block');
			break;
			
			case 'Риелторские услуги':
			alert ("Выбрали третье");
			$('#form_pc').css('display','none');
			$('#form_pc_agreement').css('display','none');
			$('#form_pc_realtor').css('display','block');
			break;
		}
		
	}); // Конец выборки значения "срочность отправления"


Вот так select выглядит в формах
<select name="type_device" class="law_types" id="law_type">


на this.value сейчас исправлю
Ответить с цитированием
  #7 (permalink)  
Старый 18.06.2015, 15:31
Аспирант
Отправить личное сообщение для Daniel93 Посмотреть профиль Найти все сообщения от Daniel93
 
Регистрация: 21.02.2015
Сообщений: 37

Попробовал вот так:
$('.law_types').on('change', function() {
		var type = $(".law_types option:selected").val();
		alert(type);
		
		if (type=="Риелторские услуги") {
			//alert("Вы выбрали Риелторские услуги");
			$('#form_pc').css('display','none')
			$('#form_pc_realtor').css('display','block');
		} else if (type=="Составление договоров (купли-продажи, аренды, подряда)") {
			$('#form_pc_realtor').css('display','none')
			$('#form_pc_agreement').css('display','block');
		}
	});


И заметил еще одну ошибку, наверное, из-за этого код и не срабатывает должным образом

Например, я выбираю "Риелторские услуги", форма изменяется и потом какой бы я не выбирал selec, все равно в type будет "Риелторские услуги"
Ответить с цитированием
  #8 (permalink)  
Старый 18.06.2015, 15:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

Daniel93, ниже кошмар доведённый до рабочего состояния
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .main  {
    display: none;

  }
  #form_pc {
    background: #008080;
  }
  #form_pc_agreement {
    background: #FFCC00;
  }
  #form_pc_realtor {
    background: #FF00FF;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
      $('.law_type').on('change', function() {
		var type = this.value;
		//alert(type);

		switch (type) {
			case 'Составление дарственных, завещаний ':
			alert ("Выбрали первое");
            $('#form_pc_agreement, #form_pc_realtor').css('display','none');
			$('#form_pc').css('display','block').find('.law_type').val(type);
			break;

			case 'Составление договоров (купли-продажи, аренды, подряда)':
			alert ("Выбрали второе");
			$('#form_pc, #form_pc_realtor').css('display','none');
			$('#form_pc_agreement').css('display','block').find('.law_type').val(type);
			break;

			case 'Риелторские услуги':
			alert ("Выбрали третье");
			$('#form_pc, #form_pc_agreement').css('display','none');

			$('#form_pc_realtor').css('display','block').find('.law_type').val(type);

            break;
		}

	}); // Конец функции

});


  </script>
</head>

<body>

<form action="handler/education.php" method="POST" id='form_pc' name="law_pc">
								<select name="type_device" class="law_type">
									<option value="Составление дарственных, завещаний ">Составление дарственных, завещаний </option>
									<option value="Составление договоров (купли-продажи, аренды, подряда)">Составление договоров (купли-продажи, аренды, подряда)</option>
									<option value="Риелторские услуги">Риелторские услуги</option>
									<option value="Защита прав потребителей">Защита прав потребителей</option>
									<option value="Помощь в оформлении ИП">Помощь в оформлении ИП</option>
									<option value=" Переустройство и перепланировка "> Переустройство и перепланировка </option>
									<option value=" Составление жалоб в прокуратуру, суды и др.  ">  Составление жалоб в прокуратуру, суды и др. </option>
								</select><br />
								<label class="">Ваше имя:</label><br />
								<input name="law_name" type="text" id="pc_name" size="36"><br />
								<label class="">Ваша фамилия:</label><br />
								<input name="law_sname" type="text" id="pc_sname" size="36"><br />
								<label class="">Номер телефона:</label><br />
								<input name="law_telephone" type="text" id="pc_telephone" size="36"><br />
								<label class="">Ваш адрес:</label><br />
								<input name="law_add" type="text" id="pc_add" size="36"><br />

								<input type="submit" name="education_send" class="btn btn-large btn-primary" value="Отправить заявку">
							</form>

<form action="handler/education.php" method="POST" id='form_pc_agreement' name="law_pc" style="display:none">
								<select name="type_device" class="law_type">
									<option value="Составление дарственных, завещаний ">Составление дарственных, завещаний </option>
									<option value="Составление договоров (купли-продажи, аренды, подряда)">Составление договоров (купли-продажи, аренды, подряда)</option>
									<option value="Риелторские услуги">Риелторские услуги</option>
									<option value="Защита прав потребителей">Защита прав потребителей</option>
									<option value="Помощь в оформлении ИП">Помощь в оформлении ИП</option>
									<option value=" Переустройство и перепланировка "> Переустройство и перепланировка </option>
									<option value=" Составление жалоб в прокуратуру, суды и др.  ">  Составление жалоб в прокуратуру, суды и др. </option>
								</select><br />
								<label class="">Ваше имя (заполнение договоров):</label><br />
								<input name="law_name" type="text" id="pc_name" size="36"><br />
								<label class="">Ваша фамилия:</label><br />
								<input name="law_sname" type="text" id="pc_sname" size="36"><br />
								<label class="">Номер телефона:</label><br />
								<input name="law_telephone" type="text" id="pc_telephone" size="36"><br />
								<label class="">Ваш адрес:</label><br />
								<input name="law_add" type="text" id="pc_add" size="36"><br />
								<input type="submit" name="education_send" class="btn btn-large btn-primary" value="Отправить заявку">
							</form>
 <form action="handler/education.php" method="POST" id='form_pc_realtor' name="law_pc" style="display:none">
								<select name="type_device" class="law_type">
									<option value="Составление дарственных, завещаний ">Составление дарственных, завещаний </option>
									<option value="Составление договоров (купли-продажи, аренды, подряда)">Составление договоров (купли-продажи, аренды, подряда)</option>
									<option value="Риелторские услуги">Риелторские услуги</option>
									<option value="Защита прав потребителей">Защита прав потребителей</option>
									<option value="Помощь в оформлении ИП">Помощь в оформлении ИП</option>
									<option value=" Переустройство и перепланировка "> Переустройство и перепланировка </option>
									<option value=" Составление жалоб в прокуратуру, суды и др.  ">  Составление жалоб в прокуратуру, суды и др. </option>
								</select><br />
								<label class="">Ваше имя (риелтор):</label><br />
								<input name="law_name" type="text" id="pc_name" size="36"><br />
								<label class="">Ваша фамилия:</label><br />
								<input name="law_sname" type="text" id="pc_sname" size="36"><br />
								<label class="">Номер телефона:</label><br />
								<input name="law_telephone" type="text" id="pc_telephone" size="36"><br />
								<label class="">Ваш адрес:</label><br />
								<input name="law_add" type="text" id="pc_add" size="36"><br />
								<input type="submit" name="education_send" class="btn btn-large btn-primary" value="Отправить заявку">
							</form>



</body>

</html>
Ответить с цитированием
  #9 (permalink)  
Старый 18.06.2015, 19:06
Аспирант
Отправить личное сообщение для Daniel93 Посмотреть профиль Найти все сообщения от Daniel93
 
Регистрация: 21.02.2015
Сообщений: 37

рони,
Спасибо большое, все работает!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение значения input при смене значения select galart jQuery 4 30.01.2015 19:39
Вывод информации в зависимости от выбранных значений select Batyabest Events/DOM/Window 1 01.10.2014 05:20
Подставить значение в action="" в зависимости от выбранного пункта select nkl Элементы интерфейса 2 13.05.2013 14:06
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 08:52
проверка формы на изменение полей, кроме одного! cmygeHm ExtJS 14 13.04.2011 18:27