Изменение формы в зависимости от 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;
		}
		
	}); // Конец функции

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

Заранее извиняюсь, если коряво описал проблему

Daniel93,
id уникально -- меняйте на класс

рони,
Вот как изменил код

$('.law_types').on('change', function() {
		var type = $(".law_types option:selected").val();
		alert(type);

Но все равно проблема осталась. Или я что-то неправильно понял?

Daniel93,
правильно -- но у вас ошибки где буквы перепутаны где пробелы -
да и
type = this.value

Daniel93,
тут то id сменили
select name="type_device" id="law_type">

рони,
Да, изменил, но проблема осталась. Вот так сейчас выглядит 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 сейчас исправлю

Попробовал вот так:

$('.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 будет "Риелторские услуги"

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>

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