Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Динамические формы. ака Выпадающие списки :) (https://javascript.ru/forum/misc/7217-dinamicheskie-formy-aka-vypadayushhie-spiski.html)

sochinec 21.01.2010 15:28

Динамические формы. ака Выпадающие списки :)
 
Здравствуйте уважаемые знатоки!

У меня вопрос, про формы ввода данных.
Например есть список на HTML:

<label>
  <select name="select" id="select">
    <option>Жилой дом</option>
    <option>Гостиница</option>
    <option>Магазин</option>
    <option>Кафе</option>
  </select>
</label>


Юзер выбирает "Жилой Дом

И ему автоматически выходит форма:
<input name="" type="text">

Улица
Номер дома
и т.д....

Ну и соответственно если юзер выбрал "Гостиница"
то ему уже другие формы выйдут, то есть сделать шаблоны форм, под каждый выбранный юзером label. Ну и кнопка отправить и записать в Базу это все дело! PHP

Помогите это реализовать!

alenkaaa 17.04.2012 23:02

помогите, у меня подобная же задача... новичек, перерыла весь инет, наверняка просто, а как?

alenkaaa 18.04.2012 01:16

нашла удобное решение проблемы http://javascript.ru/forum/dom-windo...ya-select.html,
но оказалось, что что-то не так и форма с этим решением не отправляется, где ошибка?
http://freefriends.ru/mail3_otvet/answer.php

скрипт
<script>
function Selected(a) {
	var label = a.value;
	if (label==2) {
		document.getElementById("Label2").style.display='block';
		document.getElementById("Label3").style.display='none';
		
	} else if (label==3) {
		document.getElementById("Label2").style.display='none';
		document.getElementById("Label3").style.display='block';
		
	} else {
		document.getElementById("Label2").style.display='none';
		document.getElementById("Label3").style.display='none';
	}
	
}</script>>


вырезка из формы:
<dl class="row">
			<dt class='lable'><label for="about"><strong>Проблема (вопрос):</strong></label></dt>
            <dd class="field"><select id="about" class="Validate_Required " name="about" aria-required="true" onChange="Selected(this)">
   <option value="1"  selected="selected">Решена</option>
   <option value="2">Не решена</option>
   <option value="3">Требует дополнительной проработки</option>
</select>
</dd>
</dl>


<div id='Label2' style='display: none;'>
<dl class="row">
	 <dt class='lable'><label for="problem">Причина:</label></dt>
     <dd class="field"><textarea rows="3" name="problem" id="problem" class="text required"></textarea></dd>
</dl>
</div>
<div id='Label3' style='display: none;'>
<dl class="row">
	<dt class='lable'><label for="later">Пояснение:</label></dt>
     <dd class="field"><textarea rows="3" name="later" id="later" class="text required"></textarea></dd>
</dl>
<dl class="row">
	<dt class='lable'><label for="laterв"> <div class="small">необходимые для этого сроки</div>
</label></dt>
     <dd class="field"><input type="text" id="datepicker1" name="laterd" /></dd>
</dl></div>

alenkaaa 18.04.2012 09:52

ну неужели никто не поможет?(((

vls 18.04.2012 14:39

Цитата:

Сообщение от alenkaaa
форма с этим решением не отправляется

А в ХТМЛ-е самого тега формы нету?

vuler 18.04.2012 17:19

Используй лучше JQuery библиотеку, там мне кажется проще можно сделать, ставишь обработчик событий на свой селектор
$(document).ready(function() {

   $(document).on('change',"#select",show_input_form);


});


Потом описываешь для этого события функцию show_input_form
Подробнее писать времени нет, но там ничего сложного, просто берешь $(this).val() - значение селекта, а потом можешь (свичем например) вставить ниже, в отдельный невидимый див, блок с полями для заполнения. Нужны поля можешь хранить либо в самом скрипте, либо в хтмл в невидимом блоке, тогда используй просто функцию clone для копирования хтмл из блока и вставляй в нужно место простым $('div').htm('cloned')


Часовой пояс GMT +3, время: 13:40.