Ir para conteúdo

POWERED BY:

Arquivado

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

marcelocardoso

[Resolvido] Div não esconde corretamente

Por , em Javascript

Recommended Posts

marcelocardoso    6

marcelocardoso
Postado

PEssoal!

 

 

Estou tendo problemas com o javascript de SOME APARECE DIV, pois quero que a DIV para o form MASCULINO apareca quando carrego a pagina, e a outra FEMININA tem que ficar escondida, e depois quando eu usar os:

 

<input name='selecionador' type="radio" class="VAZIA" onclick="habilitaCampos('sim');" value="s" />Se você é masculino use este formulario<br />

<input name='selecionador' type="radio" class="VAZIA" onclick="habilitaCampos('não');" value="s" />Se você é feminino use este formulario

 

Tipo daí eu clico no RADIO "Se você é feminino use este formulario", tem que aparecer este e sumir o MASCUlino

 

 

Alguém me ajuda, deve ser alguma coisa no javascript que deve estar errado.

 

 

 

<!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>TESTE DE ESCONDE E APARECE</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function habilitaCampos(escolha){
		   div = document.getElementById('opcao');
	  if ( escolha == 'sim')
		 { div.style.display = 'block'; }
	 else
		 { div.style.display = 'none';  }				 
 }		   
</script>
<table width="98%" border="0" align="center" cellpadding="2" cellspacing="2" bgcolor="#FFFFFF">
  <tr>
	<td>
  
	  <input name='selecionador' type="radio" class="VAZIA" onclick="habilitaCampos('sim');" value="s" />Se você é masculino use este formulario<br />

	  <input name='selecionador' type="radio" class="VAZIA" onclick="habilitaCampos('não');" value="s" />Se você é feminino use este formulario
	  
	  
<div id="opcao" style="display:'display';">
	  
	  
		<table width="100%" border="0" cellspacing="2" cellpadding="2" rel="contato_usuarios">
		  <tr>
			<td><form action="galanti_fale_send1.asp" method="post" name="frm" target="_parent" id="frm">
			  <table width="79%" border="0" align="center" cellpadding="2" cellspacing="2">
				<tr>
				  <td width="200"><strong>MASCULINO</strong></td>
				</tr>

				<tr>
				  <td> </td>
				</tr>
				<tr>
				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><br />
					  <label>
					  <input name="campo1" type="text" class="required" id="campo1" size="35" />
					</label></td>

				</tr>
				<tr>
				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><br />
					  <label>
					  <input name="campo2" type="text" id="campo2" size="65" class="required validate-email" />
					</label></td>
				</tr>
				<tr>

				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><br />
					  <input name="campo3" type="text" id="campo3" onkeyup="return autoTab(this, 3, event);" size="3" maxlength="3" />
					-
					<input name="campo4" type="text" id="campo4" onkeyup="return autoTab(this, 8, event);" size="10" maxlength="8" class="required validate-number" /></td>
				</tr>
				<tr>
				  <td> </td>
				</tr>
			  </table>

			  </form></td>
		  </tr>
		</table>
	  </div>
	  

<div id="opcao" style="display:'none';">
	  
	  
		<table width="100%" border="0" cellspacing="2" cellpadding="2" rel="contato_medicos">
		  <tr>
			<td><form action="galanti_fale_send2.asp" method="post" name="frm" target="_parent" id="frm">
			  <table width="79%" border="0" align="center" cellpadding="2" cellspacing="2">

				<tr>
				  <td width="200"><strong>FEMININO</strong></td>
				</tr>
				<tr>
				  <td> </td>
				</tr>
				<tr>
				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><br />

					  <label>
					  <input name="campo5" type="text" class="required" id="campo5" size="35" />
					</label></td>
				</tr>
				<tr>
				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><span class="TEXTO-ADMIN4"><br />
						<label>
						<input name="campo6" type="text" id="campo6" size="25" maxlength="20" />

						</label>
				  </span></td>
				</tr>
				<tr>
				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><br />
					  <label>
					  <input name="campo7" type="text" id="campo7" size="65" class="required" />
					</label></td>

				</tr>
				<tr>
				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><br />
					  <label>
					  <input name="campo8" type="text" id="campo8" size="65" class="required validate-email" />
					</label></td>
				</tr>
				<tr>

				  <td> </td>
				</tr>
			  </table>
			</form></td>
		  </tr>
		</table>
	  </div>
	</td>
  </tr>

</table>
</body>
</html>

 

Obrigado a todos os colegas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

DSerma    19

DSerma
Postado

Toma ele ai

 

<!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>TESTE DE ESCONDE E APARECE</title>
</head>
<body onload="habilitaCampos('sim')">
<script language="JavaScript" type="text/javascript">
function habilitaCampos(escolha){
		   div = document.getElementById('opcao');
		   div1 = document.getElementById('opcao1');
	  if ( escolha == 'sim')
		 { div.style.display = 'block';
		 div1.style.display = 'none'; }
	 else
		 { div.style.display = 'none';
		 div1.style.display = 'block';  }				
}		  
</script>
<table width="98%" border="0" align="center" cellpadding="2" cellspacing="2" bgcolor="#FFFFFF">
  <tr>
	<td>
  
	  <input name='selecionador' type="radio" class="VAZIA" onclick="habilitaCampos('sim');" value="s" />Se você é masculino use este formulario<br />

	  <input name='selecionador' type="radio" class="VAZIA" onclick="habilitaCampos('não');" value="s" />Se você é feminino use este formulario
	  
	  
<div id="opcao" style="display:'display';">
	  
	  
		<table width="100%" border="0" cellspacing="2" cellpadding="2" rel="contato_usuarios">
		  <tr>
			<td><form action="galanti_fale_send1.asp" method="post" name="frm" target="_parent" id="frm">
			  <table width="79%" border="0" align="center" cellpadding="2" cellspacing="2">
				<tr>
				  <td width="200"><strong>MASCULINO</strong></td>
				</tr>

				<tr>
				  <td> </td>
				</tr>
				<tr>
				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><br />
					  <label>
					  <input name="campo1" type="text" class="required" id="campo1" size="35" />
					</label></td>

				</tr>
				<tr>
				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><br />
					  <label>
					  <input name="campo2" type="text" id="campo2" size="65" class="required validate-email" />
					</label></td>
				</tr>
				<tr>

				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><br />
					  <input name="campo3" type="text" id="campo3" onkeyup="return autoTab(this, 3, event);" size="3" maxlength="3" />
					-
					<input name="campo4" type="text" id="campo4" onkeyup="return autoTab(this, 8, event);" size="10" maxlength="8" class="required validate-number" /></td>
				</tr>
				<tr>
				  <td> </td>
				</tr>
			  </table>

			  </form></td>
		  </tr>
		</table>
	  </div>
	  

<div id="opcao1" style="display:'none';">
	  
	  
		<table width="100%" border="0" cellspacing="2" cellpadding="2" rel="contato_medicos">
		  <tr>
			<td><form action="galanti_fale_send2.asp" method="post" name="frm" target="_parent" id="frm">
			  <table width="79%" border="0" align="center" cellpadding="2" cellspacing="2">

				<tr>
				  <td width="200"><strong>FEMININO</strong></td>
				</tr>
				<tr>
				  <td> </td>
				</tr>
				<tr>
				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><br />

					  <label>
					  <input name="campo5" type="text" class="required" id="campo5" size="35" />
					</label></td>
				</tr>
				<tr>
				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><span class="TEXTO-ADMIN4"><br />
						<label>
						<input name="campo6" type="text" id="campo6" size="25" maxlength="20" />

						</label>
				  </span></td>
				</tr>
				<tr>
				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><br />
					  <label>
					  <input name="campo7" type="text" id="campo7" size="65" class="required" />
					</label></td>

				</tr>
				<tr>
				  <td><span class="TEXTO-ADMIN4">Bla Bla Bla:</span><br />
					  <label>
					  <input name="campo8" type="text" id="campo8" size="65" class="required validate-email" />
					</label></td>
				</tr>
				<tr>

				  <td> </td>
				</tr>
			  </table>
			</form></td>
		  </tr>
		</table>
	  </div>
	</td>
  </tr>

</table>
</body>
</html>

você tinha duas Divs com o MESMO ID... errado isso....

 

Veja as alterações que fiz e compare com o seu código..

 

Abraços...

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelocardoso    6

marcelocardoso
Postado

Amigos!

 

Só mais uma coisinha, tem como acrescentar agora no código javascript algo que fizesse apagar os dados dos form???

TIPO:

 

 

Exemplo: Quando esconde uma DIV, ele também limpa os campos caso esteja preenchidos, e assim vice versa para o outro form.

Teria como acrescentar isso????

 

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelocardoso    6

marcelocardoso
Postado

Amigos!

 

Tem como fazer isso que perguntei acima????

Pois se tivesse, agradeceria se alguem me ajudasse, pois o meu conhecimento ainda é intermediario em asp, e javascript não entendo nada.

 

 

Podem me ajudar?????

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Sim, tem como. Você precisa, basicamente, identificar o formulário que deseja apagar os valores, e utilizar o reset():

document.getElementById('formulario').reset();
Aqui, por exemplo, ele irá apagar os valores do formulário cujo id seja igual a "formulario".

 

Agora, é só aplicar a idéia no seu projeto.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelocardoso    6

marcelocardoso
Postado

Valeu paulo...

tudo certinho agora e funcionando.

 

Mas consegui assim também:

<script language="JavaScript" type="text/javascript">
function habilitaCampos(escolha){
		   div1 = document.getElementById('opcao1');
		   div2 = document.getElementById('opcao2');
	  if ( escolha == 'sim')
	  
		 { 
		   document.frm1.reset();
		   div1.style.display = 'block';
		   div2.style.display = 'none'; 
		 }
	 else
		 { 
		   document.frm2.reset();
		   div1.style.display = 'none';
		   div2.style.display = 'block';  }				
}		  
</script>

 

obrigado a todos que me ajudaram...

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