Formulario esconde esconde

[alessandro 0]

galera;bom dia !!eu tenho um formulario e gostaria que quando eu selecionase um Checkbox, fosse habilitado alguns campos do form, com textbox e listbox que até então não estavam visiveis.sei lá..tipo automatico...não sei se é com css, javascript...ou sei lá o que.alguem poderia me ajudar?exemplo:eu tenho um form padrãocom nome emailendereçotelefoneai tem os checkbox : formas de pagamentocartão de credito --- debito automaticoquando ticar o cartão de credito na hora aparece os campos para preencher informações do cartão..e tudo fosse enviado junto com os campos acima....nome, email, etc...e a mesma coisa com o debito..creio eu que seja melhor usar o radio buttonpq dá a opção de escolher apenas uma opção...não sei...se alguem puder me ajudar, agradeço!

[XyBeR 0]

<script language="javascript">	function mostra(){		if (document.getElementById("campo").style.display == "none") {			document.getElementById("campo").style.display = "block";		} else {			document.getElementById("campo").style.display = "none";		}	}</script><form id="form1" name="form1" method="post" action="">  <table width="100%" border="0" cellspacing="0" cellpadding="0">	<tr>	  <td><input type="checkbox" name="checkbox" value="checkbox" onclick="mostra()" /></td>	</tr>	<tr>	  <td><div id="campo" style="display:none"><input type="text" name="textfield" /></div></td>	</tr>  </table></form>

espero q ajude :lol:

[alessandro 0]

Muito obrigado !!ajudou e muito ....agora...surgiu outra duvida...rseu substitui por um radiobutton ...e queria que tivesse dois radio button, só que quando eu habilito um aparece o seu conteudo ate então escondido.....só que quando seleciono o ouro radiobutton, aparece o conteudoi do 2 e o conteudo do primeiro continua la....gostaria que quando eu selecionasse um radiobutton o conteudo do outro ocultasse.se alguem puder me ajudar!!!!agradeço!Alessandro

[alessandro 0]

Alguem ?eu não manjo nada galera....desculpe incomodar vcs ai...

[void 1]

ta dificil para c esforçar hein??é só melhorar o código que o XyBeR fez q esté ótimo para te exemplificar verificar o valor do radio e habilitar os campos que você quer!!estudo um pouco!the void

[Andreia Regina 1]

Vê se te ajuda, só precisa adaptar:

 

if (navigator.appName == "Netscape") {function hideLayer(layerName){				layerStyleRef="layer.";				layerRef="document.layers";				styleSwitch="";				visibleVar="show";	} else {				layerStyleRef="layer.style.";				layerRef="document.all";				styleSwitch=".style";				visibleVar="visible";	}	function showLayer(layerName){document.getElementById(layerName).style.visibility = "visible";	}	function hideLayer(layerName){document.getElementById(layerName).style.visibility = "hidden";	}

e no radio coloca:

<input type="radio" name="emp_tipo" value="juridica" onclick="java script:hideLayer('cpf');showLayer('cnpj');" checked="checked"/>		<input name="emp_tipo" type="radio" value="fisica" onclick="java script:hideLayer('cnpj');showLayer('cpf');"  />

[André Xori 0]

Sei que tem anos o post acima... hahaha Mas... Do jeito q o cara queria fica assim:

To respondendo pq tb já tive muito essa dúvida. Aprendi :)

 

Talvez o javascript possa ser melhorado, mas funciona direitim :P

abraços!

 

 

CODE

<script language="javascript">

function mostra(){

if (document.getElementById("campo").style.display == "none") {

document.getElementById("campo").style.display = "block";

}

if (document.getElementById("campo").style.display == "block") {

document.getElementById("campo").style.display = "block";

}

else {

document.getElementById("campo").style.display = "none";

}

}

 

function esconde(){

if (document.getElementById("campo").style.display == "block") {

document.getElementById("campo").style.display = "none";

}

else {

document.getElementById("campo").style.display = "none";

}

}

</script>

 

 

E os RadioButtons assim:

 

CODE

<input type="radio" name="Atua" value="sim" onclick="mostra()" />

<div id="campo" style="display:none">Qual? <input type="text" name="textfield" /></div>

<input name="Atua" type="radio" value="não" onclick="esconde()" />

[klaygomes 0]

André muito legal sua iniciativa,

vamos tentar melhora-la?

 

Vou postar aqui como eu faria:

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
/*estas classes css sao necessarias para que o script funcione
corretamente*/
.show {
	display: block;
}
.hide{
	display: none;
}

</style>
<script type="text/javascript">
function Visibility(obj)
{
	if(typeof(obj) != Object)
		obj= document.getElementById(obj);
	
	var toggleVisibility = {
		hide: function(){obj.className = 'hide'},
		show: function(){obj.className = 'show';}
	}
	return{
		Toggle: function()
		{
						toggleVisibility[(obj.className == 'show' ? 'hide': 'show')]();
		}	
	}	
}

window.onload = function(){
	document.getElementById('btnVisibility').onclick = Visibility('campo').Toggle;
}
</script>

<body>
<form>
<input type="button" value="Exibe/Esconde" id="btnVisibility" />
	<div id="campo" class="show">
	Qual? <input type="text" name="textfield" /> <br />
	Qual? <input type="text" name="textfield" /><br />
	Qual? <input type="text" name="textfield" /><br />
	Qual? <input type="text" name="textfield" /><br />
	Qual? <input type="text" name="textfield" /><br />
	Qual? <input type="text" name="textfield" />	</div>

</form>
</body>
</html>

Ao escrever tentei ser o mais simples possível, porém sempre pensando na extensibilidade e reutilização.

 

Abraços,