Дополнительные поля в форме с помощью JavaScript

[clavin]

Как сделать интерактивную форму, чтобы при выборе какого-то элемента (например <input type="radio">) в форме появилось новое поле (например текстовое или ещё какое - это не очень важно). Посетитель сайта может в это новое поле ввести значение и вместе с остальными параметрами отправить на сервер. Т.е. форма таким образом интерактивно изменяется.

JavaScript совсем не знаю, поэтому спрашиваю, как можно реализовать такое.

[s0rr0w]

Как сделать интерактивную форму, чтобы при выборе какого-то элемента (например <input type="radio">) в форме появилось новое поле (например текстовое или ещё какое - это не очень важно). Посетитель сайта может в это новое поле ввести значение и вместе с остальными параметрами отправить на сервер. Т.е. форма таким образом интерактивно изменяется.

JavaScript совсем не знаю, поэтому спрашиваю, как можно реализовать такое.

Э, ты хочешь, чтобы тебе готовый код сюда выложили? Ведь ты JS не знаешь...

[Victor Ananiev]

выучить JS а погуглить про вот это:

document.createElement();

appendChild();

[MoLoToK]

clavin, как погуглите — отпишите ответ сюда. А то мне тоже это надо.

[homm]

<p><input type='radio' name='radio' value='1' onclick="hideFields(true)" checked> 1)</p>
<p><input type='radio' name='radio' value='2' onclick="hideFields(false)"> 2)</p>

<div id='hidden_fields'>
	<p>Name: <input ></p>
	<p>Sex: <input ></p> 
</div>
<script type='text/javascript'>
	document.getElementById('hidden_fields').style.display = 'none';
function hideFields(hide){
	document.getElementById('hidden_fields').style.display = hide ? 'none' : 'block';
}
</script>

[clavin]

<p><input type='radio' name='radio' value='1' onclick="hideFields(true)" checked> 1)</p>
<p><input type='radio' name='radio' value='2' onclick="hideFields(false)"> 2)</p>

<div id='hidden_fields'>
	<p>Name: <input ></p>
	<p>Sex: <input ></p> 
</div>
<script type='text/javascript'>
	document.getElementById('hidden_fields').style.display = 'none';
function hideFields(hide){
	document.getElementById('hidden_fields').style.display = hide ? 'none' : 'block';
}
</script>

Спасибо за пример.

Я так понимаю надо просто назначить переключателям radio реакции на события, а на странице написать блоки формы, которые будут скрываться и отображаться в зависимости от этих событий. Здесь ещё не хватает события, когда с элемента <input> убирается переключатель. Всё просто оказывается

Читал на сайтах, что есть разновидности JavaScript, которые по разному поддерживаются браузерами. Тут главный вопрос: как сделать кроссбраузерность для такой несложной вещи.

Э, ты хочешь, чтобы тебе готовый код сюда выложили? Ведь ты JS не знаешь...

Имею общее представление

Может кто подскажет cссылки о различиях в разных версиях JavaScript, а также об устаревшем JavaScript (читал про устаревшие элементы в языке), чтобы новичку было просто разобраться в этом вопросе и посмотреть только самое необходимое? Делаю кроссбраузерный сайт на xhtml1.0 transitional.

Edited March 12, 2009 by clavin

[homm]

предложенный вариант будет работать везде.

[xaero]

<script type="text/javascript">

function addRadio(){
	var radio = document.createElement('input');
		radio.setAttribute('type','radio');
		radio.setAttribute('name','choose_radio');
	var nl2br = document.createElement('br');
	var buttons = document.getElementById('radio_buttons');
	var texts = document.createTextNode('Ðàäèî êíîïêà');
		buttons.appendChild(radio);
		buttons.appendChild(texts);
		buttons.appendChild(nl2br);
}
</script>
<a href="java script:void(0)" onClick="addRadio()">Äîáàâèòü</a>
<div id="radio_buttons"></div>

[homm]

<script type="text/javascript">
<div id="radio_buttons"></div>

А если тебе по нажатию на кнопку нужно будет Мону Лизу показывать из блоков, ты её тоже через дом будешь делать?

[Victor Ananiev]

имхо, это неправильно, если там будет несколоько полей для добавления? тогда все в display:none; прятать?)

[clavin]

имхо, это неправильно, если там будет несколоько полей для добавления? тогда все в display:none; прятать?)

А почему бы и нет? Как по другому их прятать предлагаете?

[Иван Шумов]

ну, а давайте немного jQuery вспомним и получим

$("#radio_buttons").append('<input type="radio>это HTML вы не поерите чуваки!
и переносы строк тоже ставятся yahooo!"');

и все в таком духе, можно круче, но влом думать

[rash]

А почему бы и нет? Как по другому их прятать предлагаете?

А если их можно добавлять неограниченное количество, как их прятать предлагаете? ;-)

Правильно, их нужно создавать по мере необходимости.

[Victor Ananiev]

ну вот) а прятать через removeChild()

[s0rr0w]

Это детская задача для SC Что-то прятать, что-то показывать, это просто.

[homm]

имхо, это неправильно, если там будет несколоько полей для добавления? тогда все в display:none; прятать?)

Если все подряд идут — в общий див.

[Victor Ananiev]

ты не понял)) если например вот так:

/поле/

/* ссылка */тыцнуть что бы добавить еще

после нажатия добавляется еще поле, и т.д.) вот такого типа)

[homm]

после нажатия добавляется еще поле, и т.д.) вот такого типа)

Ну это совсем другое дело в таких случаях конечно через дом. Но такое нужно реже.

[Victor Ananiev]

Ну это совсем другое дело в таких случаях конечно через дом. Но такое нужно реже.

а что дольше построить дом или показать блок? есть ли существенная разница во времени?

гг, дом в смысле DOM))

[Иван Шумов]

существенной разницы нет

[clavin]

Я сделал нормальную форму, в которой при выборе кнопки типа type="radio" появляются новые поля формы. Реализовал всё с помощью DHTML. Сначала скрыл поля, чтобы они не отображались (задал с помощью CSS свойство display:none;). При выборе нужного переключателя задействуются функции javascript, которые назначают полям свойства display:none или display:block в зависимости от того, что надо отобразить в браузере.

Всё работает отлично, но чисто визуально резкая смена полей выглядит как-то не очень. Хотел бы сделать более привлекательно, чтобы поля постепенно проявлялись, примерно как сделано на сайте www.localhome.ru. Там есть элементы на странице, которые сменяются в зависимости от того, какую ссылку нажали. И сменяются они не мгновенно, а медленно провяляются на своём месте. Наверное, это сделано на Ajaxе. Может подскажите какой код надо вставить на страницу, чтобы иметь такой же эффект?