[Resolvido] Habilitar Campo a partir de um select

Lady Z.ero · Julho 28, 2010

Tenhu um formulario onde se a pessoa possui so até o Ensino médio ela preenche determinados campos...

e se ela tem tecnico e Superior ela preenche outros....

Queria que a partir de um listbox ela seleciona-se o grau de escolaridade e que se caso fosse Fundamental/Médio... aparecessem campos respectivos a ele e se fossem Tecnico/Superior os campo fossem diferentes ...

Alguem poderia me dar um exemplo...

Eu consegui fazer um com radio buttom... mas fico estranho...

Acho que ficaria melhor com um select.

EuToComProblema! · Julho 28, 2010

Cola o teu código pra gente ver o que fez.

Eu faria assim:

criaria uma div invisivel com os campos relacionados de cada grau de escolaridade.

depois, ao selecionar um item no select, a div correspondente apareceria.

Lady Z.ero · Julho 28, 2010

Cola o teu código pra gente ver o que fez.

Eu faria assim:

criaria uma div invisivel com os campos relacionados de cada grau de escolaridade.

depois, ao selecionar um item no select, a div correspondente apareceria.

Entao com o radio buttom eu fiz isso mas não sei se sou eu que não to sabendo adapta ou o camando com radio buttom naum é o mesmo pro select!!!

Vo posta o campo que eu fiz com o radio buttom !!!

Dee · Julho 28, 2010

Tem que usar Ajax ou JQuery pra usar com Select.

Lady Z.ero · Julho 28, 2010

Aiiii ta o com Radio Buttom

<html>

<head>
<style>
<!--
.style8 {font-size: 12px}
-->
</style>
</head>

<body>
<table>
<td width="211" align="right" style="font-family: serif; font-size: 9">
	 </td>
        <td width="377" align="left" valign="middle"> Teste 1<input type="radio" name="rd" onclick="document.getElementById('dv1').style.display = 'block'; document.getElementById('dv2').style.display = 'none'">
Teste 2<input type="radio" name="rd" onclick="document.getElementById('dv1').style.display = 'none'; document.getElementById('dv2').style.display = 'block'">
         </td>
</table>
<div id="dv1" style="display:none">
</div>

<div id="dv2" style="display:none">
<table width="598">
<tr>

  </tr>
<td width="211" align="right" style="font-family: serif; font-size: 9">
	<font face="Tahoma">
	<span style="font-size: 9pt">Carteira de Habilitação (categoria)</span></font></td>
        <td width="377" align="left" valign="middle">
          <span style="font-size: 12px">
          <font face="Tahoma">
          <select name="habilitacao" size="1" id="habilitacao" tabindex="0" style="background-color: #F0F0F0;  width:375; height:21" >
              <option selected>Selecione</option>
              <option value="A">A</option>
              <option value="B">B</option>
              <option value="C">C</option>
              <option value="D">D</option>
              <option value="E">E</option>
              <option value="A, B">A B</option>
              <option value="A, C">A C</option>
              <option value="A, D">A D</option>
              <option value="A, E">A E</option>
              <option value="Nao possui">Não tenho</option>
          </select>
          </font>
          </span> </td>
  </tr>
	<tr valign="middle" class="Form_aval">
									<td width="211" align="right" style="font-family: serif; font-size: 9">									  <span class="style8">
									<font style="" face="Tahoma"> 
									Nº Registro da CNH</font></span></td>
			  <td width="377" align="left" valign="middle">									  
				<font face="Tahoma">									  
				<input name="cnh" type="text" id="cnh" tabindex="1" size="58" maxlength="11" style="background-color: #F0F0F0; width:375">			  
				</font>			  </td>
			</tr>
	<tr valign="middle" class="Form_aval">
		<td width="211" align="right" style="font-family: serif; font-size: 9"><span style="font-size: 12px">
		<font style="" face="Tahoma">
		Data de Expedição</font></span></td>
	<td width="377" align="left" valign="middle">	  
	<font face="Tahoma">	  
	<input name="data_expedicao" type="text" id="data_expedicao" tabindex="1" onKeyPress="return mascara(event,this,'##/##/####');" size="13" maxlength="10" style="background-color: #F0F0F0; width:110" value="dd/mm/aaaa" onFocus="this.value =''" class="textInput"> 
	</font> </td>
	</table>
</div>
</div>


		</body>
<html>

Ajax, Jquery??? Com radio buttom eu não precisei de nada!!!

Dee · Julho 28, 2010

Bom... ignora o que eu falei de JQuery ou Ajax... é que envolve mais dinamismo.

Com o Select você usa o evento onchange. O que você tava usando com o Radio, onclick ?

Só trocar o Evento então.

Lady Z.ero · Julho 28, 2010

Bom... ignora o que eu falei de JQuery ou Ajax... é que envolve mais dinamismo.

Com o Select você usa o evento onchange. O que você tava usando com o Radio, onclick ?

Só trocar o Evento então.

Era sim ...

Mais no select eu coloco a função onchange dentro do option???

Dee · Julho 28, 2010

Nao..

coloca no Select

Mas você vai ter que identificar qual ID Vai aparecer dependendo do valor escolhido.

Lady Z.ero · Julho 28, 2010

Nao..

coloca no Select

Mas você vai ter que identificar qual ID Vai aparecer dependendo do valor escolhido.

Iiii como seria isso???

Dee · Julho 28, 2010

Vou tentar exemplificar... soh um instante =]

EuToComProblema! · Julho 28, 2010

pois eh. com jQuery eu sei te dizer...

function mostra_div() {
  if($('#id_do_select').val() == 'ensino médio') { //na verdade vai vir o código e nao o texto
    $('#div_ensino_medio').show();
    $('#div_outras').hide(); //esconder as outras pra caso o usuário ficar brincando com o select
  }
}

mais ou menos isso.

Dee · Julho 28, 2010

<html>

<head>

function mostraDiv(valor)

{

if(valor == "fundamental")

{

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

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

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

}

else if(valor == "medio")

{

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

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

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

}

else if(valor == "superior")

{

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

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

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

}

</script>

#fundamental, #medio, #superior

{

display:none;

}

</style>

</head>

<body>

<p>

<option value="fundamental"> Fundamental </option>

<option value="medio"> Ensino Médio </option>

<option value="superior"> Ensino Superior </option>

</select>

</p>

<p>

Nome : <input type="text" name="nome" /> <br />

Série: <input type="text" name="serie" />

</div>

Nome : <input type="text" name="nome" /> <br />

Série: <input type="text" name="serie" /> <br />

Escola: <input type="text" name="escola" />

</div>

Nome : <input type="text" name="nome" /> <br />

Série: <input type="text" name="serie" /> <br />

Escola: <input type="text" name="escola" /> <br />

Curso: <input type="text" name="curso" />

</div>

</p>

</body>

</html>

Lady Z.ero · Agosto 4, 2010

Resolvido...

Arquivado

[Resolvido] Habilitar Campo a partir de um select

Recommended Posts

Lady Z.ero 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

EuToComProblema! 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lady Z.ero 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lady Z.ero 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lady Z.ero 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lady Z.ero 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

EuToComProblema! 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lady Z.ero 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante