17.06.2015, 23:10
|
|
Аспирант
|
|
Регистрация: 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;
}
}); // Конец функции
Данный код работает, но всего один раз. Например, я выбираю
|
Код:
|
Составление договоров (купли-продажи, аренды, подряда)': |
форма изменяется. Находясь в новой форме, нажимаю
ничего не происходит. А если сразу выберу риэлторские услуги, то форма изменить, обратно уже нет
Заранее извиняюсь, если коряво описал проблему
|
|
17.06.2015, 23:38
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Daniel93,
id уникально -- меняйте на класс
|
Сообщение от Daniel93
|
|
$('#law_type').
|
|
|
18.06.2015, 01:03
|
|
Аспирант
|
|
Регистрация: 21.02.2015
Сообщений: 37
|
|
рони,
Вот как изменил код
$('.law_types').on('change', function() {
var type = $(".law_types option:selected").val();
alert(type);
Но все равно проблема осталась. Или я что-то неправильно понял?
|
|
18.06.2015, 01:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Daniel93,
правильно -- но у вас ошибки где буквы перепутаны где пробелы -
да и
|
Сообщение от Daniel93
|
var type = $(".law_types option:selected").val();
|
type = this.value
|
|
18.06.2015, 01:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Daniel93,
тут то id сменили
select name="type_device" id="law_type">
|
|
18.06.2015, 01:30
|
|
Аспирант
|
|
Регистрация: 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 сейчас исправлю
|
|
18.06.2015, 15:31
|
|
Аспирант
|
|
Регистрация: 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 будет "Риелторские услуги" |
|
18.06.2015, 15:56
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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>
|
|
18.06.2015, 19:06
|
|
Аспирант
|
|
Регистрация: 21.02.2015
Сообщений: 37
|
|
|
рони,
Спасибо большое, все работает!
|
|
|
|
