Изменение формы в зависимости от select

[Daniel93]

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

Я хочу, чтобы форма менялась в зависимости от того, какой 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_type').

[Daniel93]

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

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


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

[рони]

Daniel93,
правильно -- но у вас ошибки где буквы перепутаны где пробелы -
да и
var type = $(".law_types option:selected").val();
type = this.value

[рони]

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

[Daniel93]

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

[Daniel93]

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

$('.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_ty pe').val(type);
break;

case 'Составление договоров (купли-продажи, аренды, подряда)':
alert ("Выбрали второе");
$('#form_pc, #form_pc_realtor').css('display','none');
$('#form_pc_agreement').css('display','block').fin d('.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>

[Daniel93]

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