Exibir campo quando escolher uma opção na caixa suspensa...

[JRFOL 0]

Estou com um formulario onde coloquei uma caixa suspensa com varias opções, gostaria que quando alguem seleciona-se OUTROS... aparece-se uma caixa de texto para o usuario preencher...

 

como faria isso !?

[William Bruno 1501]

Javascript amigo.

Captura o value do option que tem o "Outros", e dá um display block, num input text.

[JRFOL 0]

Javascript amigo.

Captura o value do option que tem o "Outros", e dá um display block, num input text.

peguei um codigo de Display Block... mas não esta funcionando no IE só no FIREFOX....

 

SCRIPT:

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				color: #000;
			}
			
			ul li ul {
				margin-left: 50px;
			}
		</style>
		<script type="text/javascript">
			function showMenu(subMenu){
				var menu = document.getElementById(subMenu);
				if ( menu.style.display == "none" ) {
					menu.style.display = "block";
				} else {
					menu.style.display = "none";
				}
			}
			function esconde(){
if(document.getElementById("escondido").style.display == "block"){
		 document.getElementById("escondido").style.display = "none";
	   }
	   else {
	   document.getElementById("escondido").style.display = "none";
		}
	  }
		</script>

SELECT BOX

<select size="1" name="curso" style="border:1px solid #C0C0C0; font-family: Verdana; font-size: 8pt; ">
		<option onClick="esconde()">Selecione</option>
		<option onClick="esconde()">Tecnologia em Segurança do Trabalho</option>
		<option onClick="esconde()">Ciências Contábeis</option>
		<option onClick="esconde()">Psicologia</option>
		<option onClick="esconde()">Matemática (licenciatura)</option>
		<option onclick="showMenu('escondido')">Outro</option>
		</select><br>

BLOCO OCULTO

<ul id="escondido" style="display: none;">
<input type="text" name="T1" size="20" value="Digite qual o curso" style="font-family: Verdana; font-size: 8pt; color: #666666; border: 1px solid #C0C0C0"></ul>

[novato_PHP 0]

Pra que complicar amigo? Faça como William Bruno disse... olhe

 

podes fazer assim...

 

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				color: #000;
			}
			
			ul li ul {
				margin-left: 50px;
			}
		</style>
		<script type="text/javascript">
			function exibe(){
				var campo=document.getElementById('select').value;
				if (campo=="outro")
				{
					document.getElementById('escondido').style.display="block";
				}
				else
				{
					document.getElementById('escondido').style.display="none";
				}	
					
			}
		</script>
		
		<select size="1" id="select" name="curso" OnChange="exibe();" style="border:1px solid #C0C0C0; font-family: Verdana; font-size: 8pt; ">
		<option value="">Selecione</option>
		<option value="">Tecnologia em Segurança do Trabalho</option>
		<option value="">Ciências Contábeis</option>
		<option value="">Psicologia</option>
		<option value="">Matemática (licenciatura)</option>
		<option value="outro">Outro</option>
		</select><br>
		<div id="escondido" style="display: none;">
	<input type="text" name="T1" size="20" value="Digite qual o curso" style="font-family: Verdana; font-size: 8pt; color: #666666; border: 1px solid #C0C0C0"></div>

Num precisa criar uma função e chamar em cada click do option nao....

[JRFOL 0]

Pra que complicar amigo? Faça como William Bruno disse... olhe

 

podes fazer assim...

 

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				color: #000;
			}
			
			ul li ul {
				margin-left: 50px;
			}
		</style>
		<script type="text/javascript">
			function exibe(){
				var campo=document.getElementById('select').value;
				if (campo=="outro")
				{
					document.getElementById('escondido').style.display="block";
				}
				else
				{
					document.getElementById('escondido').style.display="none";
				}	
					
			}
		</script>
		
		<select size="1" id="select" name="curso" OnChange="exibe();" style="border:1px solid #C0C0C0; font-family: Verdana; font-size: 8pt; ">
		<option value="">Selecione</option>
		<option value="">Tecnologia em Segurança do Trabalho</option>
		<option value="">Ciências Contábeis</option>
		<option value="">Psicologia</option>
		<option value="">Matemática (licenciatura)</option>
		<option value="outro">Outro</option>
		</select><br>
		<div id="escondido" style="display: none;">
	<input type="text" name="T1" size="20" value="Digite qual o curso" style="font-family: Verdana; font-size: 8pt; color: #666666; border: 1px solid #C0C0C0"></div>

Num precisa criar uma função e chamar em cada click do option nao....

este codgo que me passou não esta funcionando no IE... só no FIREFOX... (igual o meu, que a unica coisa que tem a+ é a função para ocultar o campo, caso o usuario mude de OUTRO para outra opção)

[novato_PHP 0]

É?

 

Qual IE você testou? No meu IEca 6 funcionou...

 

IE6

 

Chrome

 

Firefox

 

 

 

 

Num sei nos outros IE7 e no 8 num tenho ....

[Wilbor Love Fã 0]

Olá galera...li o que foi postado e acho que posso ajudar!

 

Diferenças de javascript do IE/Firefox/Safari/Opera/Chrome

 

Estamos habituados a digitar rapidamente e não seguir alguns padrões simples de HTML que auxiliam outros linguagens, como o javascript.

O segredo de funcionamento em vários navegadores não está somente na sintáxe, mas também no ID.

 

Padrão Input: <input name="sdfs" type="text" size="10" maxlength="10" />

Correto:

 

Padrão Textarea: <textarea name="campo2" cols="4" rows="4" wrap="virtual"></textarea>

Correto: <textarea id="campo2" name="campo2" cols="4" rows="4" wrap="virtual"></textarea>

 

Olá galera...li o que foi postado e acho que posso ajudar!

 

Diferenças de javascript do IE/Firefox/Safari/Opera/Chrome

 

Estamos habituados a digitar rapidamente e não seguir alguns padrões simples de HTML que auxiliam outros linguagens, como o javascript.

O segredo de funcionamento em vários navegadores não está somente na sintáxe, mas também no ID.

 

Padrão Input: <input name="campo1" type="text" size="10" maxlength="10" />

Correto: <input id="campo1" name="campo1" type="text" size="10" maxlength="10" />

 

Padrão Textarea: <textarea name="campo2" cols="4" rows="4" wrap="virtual"></textarea>

Correto: <textarea id="campo2" name="campo2" cols="4" rows="4" wrap="virtual"></textarea>

 

Este Método ID+NAME deve ser utilizado em todos os tipos de campos do formulário: Rádio Group,Select,Hidden,Button,JumpMenu,Checkbox...etc

O próprio javascript já passa uma dica de quem ele irá utilizar por segurança contra falha: "document.getElementById('campoemquestao')"

Ou seja, a boa prática de usar a dupla dinâmica evita problema com navegadores e facilita para o JavaScript.

 

Utilize o exemplo passado e inclua o ID junto do NAME e veja se irá funcionar. OK

 

Espero ter ajudado no conceito.

=====================================================

POGRAMANO é na Rádio 89...hehehehe