Formulário

Leonardo Dias · Março 4, 2008

Ola,

Preciso ter a seguinte situação no meu formulário, onde eu seleciono uma opção de curso ele me mostra a descrição do curso no textbox.

Minha dúvida é como farei conseguir colocar um simples palavra no combobox e assim que eu selecionar a palavra ela me mostrar o significado (descrição ) em um outro textbox.

Isso é possível, alguém já viu algo do tipo.

tenho um exemplo de seleção da palavra e me mostra ela no textbox....

<html>
<body>
<script type="text/javascript">

function ieStinks()
{
  if (navigator.appName == "Microsoft Internet Explorer")
  {
    document.getElementById("txtCombo").style.width = "120px";
    document.getElementById("selCombo").style.top = "44px";
  }
}

function fakeCombo(x,e)
{
  var S = document.getElementById("selCombo");
  var L = S.options.length;
  var found = false;
  var myIndex = 0;

  var keycode;
  if (navigator.appName == "Microsoft Internet Explorer")
  { keycode = e.keyCode; }
  else
  { keycode = e.which }

  if (keycode == 13)
  {
    for (var i=0; i <= L-1; i++)
    {
      if (x.value == S.options[i].value) {found = true; myIndex = i};

    }

    if (found)
    {
      S.options.selectedIndex = myIndex;
    }
    else
    {
      S.options[S.options.length] = new Option(x.value,x.value);
      S.options.selectedIndex = (S.options.length - 1);
    }

    return false;
  }
}

function mySelect(x)
{
 document.getElementById("txtCombo").value = x.options[x.selectedIndex].value;
}

</script>
</head>
<body onload="ieStinks();">
  <form>
    <input onkeypress="java script:return fakeCombo(this,event);"
      id="txtCombo" class="txtBox" /><br/>
    <select id="selCombo" class="dropDown"
      onChange="java script:mySelect(this);" />
    <option value="Volvo"/>Volvo
    <option value="Saab"/>Saab
    <option value="Fiat"/>Fiat
    <option value="Audi"/>Audi
    </select>
  </form>
</body>
</html>

</body>
</html>

Por favor, mande sugestões.

Obrigado.

LéO...

Editado Março 5, 2008 por andreia_sp
Adicionar tag CODE

Eric Freitas · Março 4, 2008

não lembro o nome do evento q você tem q útilizar..

mas aí vai uma lista de eventos pra você testar! =D

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

onfocus

onblur

onchange onclick ondblclick

onsubmit

onreset

onerror

onkeydown

onkeypress

onkeyup

onload

onunload

onabort

onmousedown

onmouseup

onmousemove

onmouseout

onmouseover

onmove

onresize

-----------

você cria uma função js passando como parametro o valor da OP do combo

se seus dados vem do banco usa ajax pra pegar a descrição.

se não faz na mão...

Editado Março 4, 2008 por Eric Freitas

Gigabyte · Março 5, 2008

Cara.... seguinte!

A sua função JS está boa, mas o negócio é mais simples:

1- A sua sintaxe HTML possui uns erros. Por exemplo: a "/" no final da TAG significa que ela inicia e termina num único comando.

Exemplo:

<br />

Ao contrário, as tags que formam "blocos de encapsulamento", ou seja que possui dentro dela dados ou mesmo outras TAG's, possuem abertura em um comando e fechamento em outro . Exemplo:

<select onclick="java script:minhFunção()">
  <option value="1">UM</option>
  <option value="2">DOIS</option>
  <option value="3">TRÊS</option>
</select>

Sugiro que você use pelo menos para os seus testes de sintaxe o Firefox com alguns complementos como o Firebug e o Web Developer, que pode lhe indicar esses tipos de erro, e também (por mais que os conservadores combatam...) algum tipo de editor como o PHPDesigner 2008, que possui um auto-completar ótimo na hora de pressa. O importante é não acomodar com esses recursos e ficar totalmente dependente dele, se tornando incapaz de escrever uma sintaxe correta de memória. 2 - A forma mais fácil de capturar o valor selecionado em um campo select é:

document.getElementById("txtCombo").value = x.value;  //rsrsrsrs..

Eu ia postar o código corrigido, mas aí você ia perder a oportunidade de mellhorar, e isso não é o intuito dos fóruns....porém, se ficar qualquer dúvida ainda, posta aí!!!!

Se tiver um tempinho e um inglês médio: w3Schools costumo sugerir esse site a todos, desde aprendizes a avançados..

[]'s

Allan Rodrigo · Março 5, 2008

Cara.... seguinte!
A sua função JS está boa, mas o negócio é mais simples:
1- A sua sintaxe HTML possui uns erros. Por exemplo: a "/" no final da TAG significa que ela inicia e termina num único comando.
Exemplo:
<br />
Ao contrário, as tags que formam "blocos de encapsulamento", ou seja que possui dentro dela dados ou mesmo outras TAG's, possuem abertura em um comando e fechamento em outro . Exemplo:
<select onclick="java script:minhFunção()">
  <option value="1">UM</option>
  <option value="2">DOIS</option>
  <option value="3">TRÊS</option>
</select>
Sugiro que você use pelo menos para os seus testes de sintaxe o Firefox com alguns complementos como o Firebug e o Web Developer, que pode lhe indicar esses tipos de erro, e também (por mais que os conservadores combatam...) algum tipo de editor como o PHPDesigner 2008, que possui um auto-completar ótimo na hora de pressa. O importante é não acomodar com esses recursos e ficar totalmente dependente dele, se tornando incapaz de escrever uma sintaxe correta de memória. 2 - A forma mais fácil de capturar o valor selecionado em um campo select é:
document.getElementById("txtCombo").value = x.value;  //rsrsrsrs..
Eu ia postar o código corrigido, mas aí você ia perder a oportunidade de mellhorar, e isso não é o intuito dos fóruns....porém, se ficar qualquer dúvida ainda, posta aí!!!!
Se tiver um tempinho e um inglês médio: w3Schools costumo sugerir esse site a todos, desde aprendizes a avançados..
[]'s

Olá gigabyte!

o evento corrento para usar neste caso não seria o onchange?

abraços, allan!

Leonardo Dias · Março 5, 2008

Ola,

Primeiramente quero agradecer pela ajuda, mais mesmo assim estou meio perdido pois nunca tinha feito algo parecido antes.

Ola,

Primeiramente quero agradecer pela ajuda, mais mesmo assim estou meio perdido pois nunca tinha feito algo parecido antes.

Por favor, se pudesse comentar o código para que tipo de ação irá retornar eu agradeço, pois me embaralhei todo.

Grato.

LéO.

Gigabyte · Março 5, 2008

Sim, isso mesmo, o exemplo que eu coloquei foi só ilustrativo para demonstrar a sintaxe do HTML... rsrss

Código comentado.... com frescurinhas a mais e tudo ashuahushuassau!!!!!!

<html>
<body>
<script type="text/javascript">

// Função que simplesmente pega os objetos e redefine os seus tamanhos caso o navegador seja o IE!
function ieStinks()  
{
  if (navigator.appName == "Microsoft Internet Explorer")
  {
    document.getElementById("txtCombo").style.width = "120px";
    document.getElementById("selCombo").style.top = "44px";
  }
}

function fakeCombo(x,e){
  
  var S = document.getElementById("selCombo"); // Atribui à variável S o objeto que possui id="selCombo", que neste caso é um combo
  var L = S.options.length; // Atribui a variável L a quantidade de opções do combo
  var found = false; // inicializa a variável found como falso
  var myIndex = 0; // inicializa a variável myIndex como 0
  var keycode; // Inicializa a variável keycode sem definir o tipo
  var valTeste = x.value; // Cria uma cópia do valor do txt para retirar espaços em branco

  if (navigator.appName == "Microsoft Internet Explorer"){ 
    keycode = e.keyCode; // Atribui a keycode o valor da tecla pressionada (IE)
  }else{ 
    keycode = e.which; // Atribui a keycode o valor da tecla pressionada (FF, Opera, Safari, etc..)
  }

  if (keycode == 13){ // Se a tecla for enter
    while(valTeste.match(" ")){ // Enquanto houver espaço em branco...
      valTeste = valTeste.replace(" ",""); // Retira espaço em branco do valor digitado
    }
    if (valTeste == ""){ // Caso o txt esteja vazio após retirar espaços em branco...
      return false; // Não permite a criação do objeto <option>
    }
    for (var i=0; i <= L-1; i++){ // Percorre todos os itens do combo 
      if (x.value == S.options[i].value){ // Verifica se o digitado corresponde a um valor existente no combo
        found = true; // Caso positivo, seta found como verdadeiro...
        myIndex = i; // E myIndex com o número do índice da opção (objeto <option>) que atende possui o valor procurado
      }
    }

    if (found){ // Se encontrou...
      S.options.selectedIndex = myIndex; // Muda o select para exibir o option encontrado
    }else{ // Senão...
      S.options[S.options.length] = new Option(x.value,x.value); // Insere por DOM um novo objeto <option> como valor digitado no campo texto
      S.options.selectedIndex = (S.options.length - 1); // Muda o select para exibir o option criado
    }
    return false;
  }
}

// Função que escreve no campo de texto o valor selecionado no select
function mySelect(x){
  document.getElementById("txtCombo").value = x.value;
}

</script>
</head>
<body onload="ieStinks();">
  <form>
    <input onkeypress="java script:return fakeCombo(this,event);" id="txtCombo" class="txtBox" /><br/>
    <select id="selCombo" class="dropDown" onChange="java script:mySelect(this);" />
      <option value="Volvo">Volvo
      <option value="Saab">Saab
      <option value="Fiat">Fiat
      <option value="Audi">Audi
    </select>
  </form>
</body>
</html>

</body>
</html>

Editado Março 5, 2008 por Gigabyte

Entrar

Formulário

Pergunta

Leonardo Dias

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

Eric Freitas

Link para o comentário

Compartilhar em outros sites

Gigabyte

Link para o comentário

Compartilhar em outros sites

Allan Rodrigo

Link para o comentário

Compartilhar em outros sites

Leonardo Dias

Link para o comentário

Compartilhar em outros sites

Gigabyte

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades