Jump to content


Photo

Interação Entre Campos Select E Text


  • Faça o login para participar
3 replies to this topic

#1 anderson farias

anderson farias

    Normal

  • Usuários
  • 62 posts
  • Sexo:Masculino
  • Localidade:Bahia
  • Interesses:Ajudar, trabalhar e viver...

Posted 03/01/2010, 23:55

Olá Pessoal ,

Na minha aplicação tenho um select que lista informações do banco (conforme código abaixo), gostaria de quando o usuário escolhece uma das opções automaticamente no campo posterior tipo text aparecesse as quatro primeiras letras referente ao select selecionado.

<select name="curso">
<?php
$query = "SELECT * FROM cursos ORDER BY nome_curso";
$resultado = mysql_query($query);
  while($linha=mysql_fetch_array($resultado))
   {
      echo "<option value='".$linha['nome_curso']."'>".$linha['nome_curso']."</option>";
   }
?>
   </select>

Turma:
<input type="text" name="turma" size="10" />


Muito grato pela atenção e gostaria de informar que o fórum me ajudou bastante nos últimos dias,obrigado.

#2 Goku Jr

Goku Jr

    Nilson

  • Usuários
  • 3757 posts
  • Sexo:Masculino

Posted 04/01/2010, 07:52

Da pra fazer isso com JS assim não precisa dar reflesh na página para aparecer o conteúdo escolhido num campo text...
-----------------------------------------------------------------------
PALMEIRAS - Primeiro campeão do mundo em 1951

#3 André Manoel

André Manoel

    Doutor

  • Usuários
  • 996 posts
  • Sexo:Masculino
  • Localidade:Brasilia

Posted 04/01/2010, 09:11

E aí Anderson...

Vou expor uma das idéias de como solucionar o seu problema...!

Ao meu ver isso só pode ser feito através de javascript.

Existem diversas formas de se fazer com javascript ... vou sugerir uma:

-------------------------------------------------------------------

Em Javascript você pode manipular qualquer coisa na sua página.
Eu tenho o costume de sempre utilizar id's nos objetos do formulário. Justamente para ter uma maior controle sobre quem estou selecionando
na minha página.

Então só para deixar mais claro:
Na sua página você pode ter id's e classes nas suas tags html.
A diferença é que a classe pode se repetir várias vezes...


     <div class = "box"></div>

     <div class = "box"></div>

     <div class = "box"></div>


'id' você só pode ter um em sua página. É Um identificador único.


     <div id = "menu"></div>


Quando você vai manipular os campos de um form o ideal é você ter um id para cada campo.


<select name="curso" id="curso" onchange="carregarTurma()">
	<option value="SISTEMAS DE INFORMAÇÃO">SISTEMAS DE INFORMAÇÃO</option>
    <option value="DIREITO">DIREITO</option>
    <option value="CONTABILIDADE">CONTABILIDADE</option>
    <option value="HISTÓRIA">HISTÓRIA</option>
</select>

Turma:
<input type="text" name="turma" size="10" id = "turma"/>


Eu adicionei os id's nos seus campos de formulário para manipulá-los através de javascript.
Lembrando que você consegue manipular sem esses id's mas fica um pouco mais complicado.

Eu adicionei também no seu select o evento onchange. Este evento irá ocorrer quando alguém selecionar o seu select.
Quando este evento for disparado ele irá chamar a função 'carregarTurma()';

Então O código todo fica assim:


   <!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</title>

<script language="javascript">

	function carregarTurma()
	{
		//recupera o valor selecionado no select
		turma =  document.getElementById('curso').value;
		
		//retira somente as 4 primeiras letras do valor
		string = turma.substr(0,4);
		
		document.getElementById('turma').value = string;
	}
	

</script>

</head>

<body>


<select name="curso" id="curso" onchange="carregarTurma()">
	<option value="SISTEMAS DE INFORMAÇÃO">SISTEMAS DE INFORMAÇÃO</option>
    <option value="DIREITO">DIREITO</option>
    <option value="CONTABILIDADE">CONTABILIDADE</option>
    <option value="HISTÓRIA">HISTÓRIA</option>
</select>

Turma:
<input type="text" name="turma" size="10" id = "turma"/>

</body>
</html>


Faça o teste aí e vê se é assim mesmo que você está precisando.

Abração!

Considere me reputar heiN!

Fica na paz!
Iniciando na Ajuda On line...

Posted Image Meu post lhe ajudou? Reputar/votar é uma das formas de agradecer.

#4 anderson farias

anderson farias

    Normal

  • Usuários
  • 62 posts
  • Sexo:Masculino
  • Localidade:Bahia
  • Interesses:Ajudar, trabalhar e viver...

Posted 04/01/2010, 13:59

Muito obrigado pela ajuda, ficou certinho, valew brother.

abraços ,

anderson farias



E aí Anderson...

Vou expor uma das idéias de como solucionar o seu problema...!

Ao meu ver isso só pode ser feito através de javascript.

Existem diversas formas de se fazer com javascript ... vou sugerir uma:

-------------------------------------------------------------------

Em Javascript você pode manipular qualquer coisa na sua página.
Eu tenho o costume de sempre utilizar id's nos objetos do formulário. Justamente para ter uma maior controle sobre quem estou selecionando
na minha página.

Então só para deixar mais claro:
Na sua página você pode ter id's e classes nas suas tags html.
A diferença é que a classe pode se repetir várias vezes...


     <div class = "box"></div>

     <div class = "box"></div>

     <div class = "box"></div>


'id' você só pode ter um em sua página. É Um identificador único.


     <div id = "menu"></div>


Quando você vai manipular os campos de um form o ideal é você ter um id para cada campo.


<select name="curso" id="curso" onchange="carregarTurma()">
	<option value="SISTEMAS DE INFORMAÇÃO">SISTEMAS DE INFORMAÇÃO</option>
    <option value="DIREITO">DIREITO</option>
    <option value="CONTABILIDADE">CONTABILIDADE</option>
    <option value="HISTÓRIA">HISTÓRIA</option>
</select>

Turma:
<input type="text" name="turma" size="10" id = "turma"/>


Eu adicionei os id's nos seus campos de formulário para manipulá-los através de javascript.
Lembrando que você consegue manipular sem esses id's mas fica um pouco mais complicado.

Eu adicionei também no seu select o evento onchange. Este evento irá ocorrer quando alguém selecionar o seu select.
Quando este evento for disparado ele irá chamar a função 'carregarTurma()';

Então O código todo fica assim:


   <!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</title>

<script language="javascript">

	function carregarTurma()
	{
		//recupera o valor selecionado no select
		turma =  document.getElementById('curso').value;
		
		//retira somente as 4 primeiras letras do valor
		string = turma.substr(0,4);
		
		document.getElementById('turma').value = string;
	}
	

</script>

</head>

<body>


<select name="curso" id="curso" onchange="carregarTurma()">
	<option value="SISTEMAS DE INFORMAÇÃO">SISTEMAS DE INFORMAÇÃO</option>
    <option value="DIREITO">DIREITO</option>
    <option value="CONTABILIDADE">CONTABILIDADE</option>
    <option value="HISTÓRIA">HISTÓRIA</option>
</select>

Turma:
<input type="text" name="turma" size="10" id = "turma"/>

</body>
</html>


Faça o teste aí e vê se é assim mesmo que você está precisando.

Abração!

Considere me reputar heiN!

Fica na paz!






1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq