Javascript-форум - Открытие полей формы при выборе определенного radio

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Открытие полей формы при выборе определенного radio (https://javascript.ru/forum/events/4876-otkrytie-polejj-formy-pri-vybore-opredelennogo-radio.html)

Открытие полей формы при выборе определенного radio

Подскажите, пожалуйста. Как сделать, чтобы в форме, если выбран один radio - открывались одни поля, если выбран другой radio - открывались другие поля?

Мой код:

<script language="javascript">
<!--
function doBlock(id) {
document.getElementById(id).style.display = "block";
}
-->
</script>
<input type=radio name=n value=q onClick="doBlock('new')">
<input type=radio name=n value=q onClick="doBlock('old')">
<div id="new" style="display:none;"><br>Новый</div>
<div id="old" style="display:none;"><br>Старый</div>

Цитата:

Сообщение от rolph

Подскажите, пожалуйста. Как сделать, чтобы в форме, если выбран один radio - открывались одни поля, если выбран другой radio - открывались другие поля?

Вы сами ответили:

Цитата:

Сообщение от rolph

display = "block"

Цитата:

Сообщение от rolph

display:none;

Только поле с display:none все равно отправляется на сервер, нужно либо дописывать disabled = true , либо обнулять name, запоминая его в каком-нибудь __name , что бы потом восстановить.

А есть какой-нибудь пример?

input type="radio", пример отображения 1-го из 2-х блоков

function doBlock(id) {
if(id == "new"){
  document.getElementById('old').style.display = "none";
  document.getElementById(id).style.display = "block";
}
else{
  document.getElementById('new').style.display = "none";
  document.getElementById(id).style.display = "block";
}  
}

А если несколько блоков? Надо через switch?

function doBlock(id) {
switch (id) {
	case first:
	{
	  document.getElementById(id).style.display = "block";
	  document.getElementById('second').style.display = "none";
	  document.getElementById('third').style.display = "none";
	  document.getElementById('fourth').style.display = "none";
	}
	case second:
	{ 
	 document.getElementById(id).style.display = "block";
	  document.getElementById('first').style.display = "none";
	  document.getElementById('third').style.display = "none";
	  document.getElementById('fourth').style.display = "none";
	}
	case third:
	{ 
	 document.getElementById(id).style.display = "block";
	  document.getElementById('first').style.display = "none";
	  document.getElementById('second').style.display = "none";
	  document.getElementById('fourth').style.display = "none";
	}
	case third:
	{ 
	 document.getElementById(id).style.display = "block";
	  document.getElementById('first').style.display = "none";
	  document.getElementById('second').style.display = "none";
	  document.getElementById('fourth').style.display = "none";
	}	
	} 
}