Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

cazauza

Radio Button "PF" E "PF"com Javascript

Por , em Javascript

Recommended Posts

cazauza    0

cazauza
Postado

Preciso fazer 2 radio button "Pessoa física " e "pessoa jurídica", sendo que qdo o pessoa jurídica estiver habilitados o pessoa física fica oculto e vice versa.

consegui desenvolver o seguinte código, porem os campos que vão ser ocultos ou visíveis estou definindo um a um ,

 

GOSTARIA DE SABER C TEM COMO EU FAZER TODOS OS CAMPO DE UMA SÓ VEZ < USANDO CLASS OU ALGO DO TIPO

 

 

 

OBRIGADO

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<body>

<script type="text/javascript">

function pf(){

document.form.pfisica.style.visibility='visible';

document.getElementById("texto1").style.setAttribute('visibility', 'visible');

document.getElementById("texto2").style.setAttribute('visibility', 'hidden');

document.form.pjuridica.style.visibility='hidden';

}

function pj(){

document.form.pjuridica.style.visibility='visible';

document.getElementById("texto2").style.setAttribute('visibility', 'visible');

document.getElementById("texto1").style.setAttribute('visibility', 'hidden');

document.form.pfisica.style.visibility='hidden';

}

</script>

 

 

<form name="form" method="get" action="pagina.php">

<input type="radio" name="tipo" id="juridica" value="juridica" onClick="pj()"> <label for="juridica"> PESSOA Juridica</label>

<input type="radio" name="tipo" id="fisica" value="fisica" onClick="pf()"> <label for="fisica"> PESSOA F&IacuteSICA</label>

<br />

<table class= "text" cellSpacing="5" width="100%" border="0">

<tr>

<td align="right" width="30%"><div id="texto1" style="visibility:hidden">Gostaria de ser chamado de:</div></td>

<td width="70%"><input name="1" id="pfisica" type="text" style="width: 185; height: 22; visibility: hidden" size="20"></td>

</tr>

</table>

 

 

<form name="form2" method="get" action="">

<table class= "text2" cellSpacing="5" width="100%" border="0">

<tr>

<td align="right" width="30%"><div id="texto2" style="visibility:hidden">Gostaria de ser chamado de:</div></td>

<td width="70%"><input name="1" id="pjuridica" type="text" style="width: 185; height: 22; visibility: hidden" size="20"></td>

</tr>

</table>

 

</form>

 

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Schiavon    0

João Schiavon
Postado

Uma maneira seri você usar DIV´s, sobrepostas (ou hiden).

 

Você ativa e ou desativa... veja exemplo:

 

 

<script language="JavaScript" type="text/javascript">
	var z = 10;
	function mostrarAba(aba) {
		divAba = document.getElementById(aba);
		divAba.style.zIndex = z++;
	}
</script>
<style>
#a1 {
	background-color:#80ffff;	
}	
#a2 {
	background-color:#80ff80;
}	
#a3 {
	background-color:#ff8080;
}	
#aba1 {
	width: 600px;
	height: 200px;
	background-color:#80ffff;
	margin: 10px;
	top: 20px;
	left: 0px;
	position: absolute;
}
#aba2 {
	width: 600px;
	height: 200px;
	background-color:#80ff80;
	margin: 10px;
	top: 20px;
	left: 0px;
	position: absolute;
}
#aba3 {
	width: 600px;
	height: 200px;
	background-color:#ff8080;
	margin: 10px;
	top: 20px;
	left: 0px;
	position: absolute;
}
ul {
	top: 220px;
	position: absolute;
}

li {
	display: inline;
	background-color: #CDCDCD;
	border: 1px solid #ABABAB;
}
</style>
<form>
	<div id="container">
	<ul>
		<li><a id="a1" href="java script:mostrarAba('aba1')">Aba1</a></li>
		<li><a id="a2" href="java script:mostrarAba('aba2')">Aba2</a></li>
		<li><a id="a3" href="java script:mostrarAba('aba3')">Aba3</a></li>
	</ul>
	<div id="aba1">
	Conteúdo da primeira aba
				Código 01: <input type="text"/>
	</div>
	<div id="aba2">
	Conteúdo da segunda aba
				Código 02: <input type="text"/>
	</div>
	<div id="aba3">
	Conteúdo da terceira aba
				Código 03: <input type="text"/>
	</div>
	</div>
</form>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito