Input field completed according to the selected select

Asked

Viewed 424 times

-2

I have a list of options on the tag select, and I want to show a specific text in a field input, depending on the option chosen in the field select.

If the option "TRANSPARENT" or "FROSTED" is chosen, the field input "Print Orientation", will be filled with the text "INTERNAL". If the option "PEARL" or "METALIZED", the input shall be filled in with the text "EXTERNAL".

Exemplo dos campos

Code:

<div id="banner-message" class="span3">
   <label for="substrato_imprime">Substrato (Impressão)<span class="required"></span></label>
   <select class="span12" name="substrato_imprime" id="substrato_imprime" style="text-transform:uppercase" value="">
      <option value="">Selecione</option>
      <option value="TRANSPARENTE">TRANSPARENTE</option>
      <option value="FOSCO">FOSCO</option>
      <option value="PEROLA">PÉROLA</option>
      <option value="METALIZADO">METALIZADO</option>
   </select>
</div>

<div class="span3">
   <label for="camada">Orientação da Impressão<span class="required"></span></label>
   <input class="span12" name="camada" id="camada" style="text-transform:uppercase" value="" >
</div>

php javascript html

1 answer

0


  • Take the value of the option
  • Compare with the appropriate values
  • Enter in the value of the input the return of the if else

function associaInput() {
     var variavel;
    //pega o value do select
    var e = document.getElementById("substrato_imprime");
    var itemSelecionado = e.options[e.selectedIndex].value;
    //injeta no value do input
    if (itemSelecionado=="TRANSPARENTE" || itemSelecionado=="FOSCO"){
        variavel="INTERNA";
    }else if (itemSelecionado=="PEROLA" || itemSelecionado=="METALIZADO"){
        variavel="EXTERNA";
    }
    document.getElementById('camada').value = variavel;
}
<div id="banner-message" class="span3">
   <label for="substrato_imprime">Substrato (Impressão)<span class="required"></span></label>
   <select class="span12" name="substrato_imprime" id="substrato_imprime" style="text-transform:uppercase" onchange="javascript:associaInput();">
      <option value="">Selecione</option>
      <option value="TRANSPARENTE">TRANSPARENTE</option>
      <option value="FOSCO">FOSCO</option>
      <option value="PEROLA">PÉROLA</option>
      <option value="METALIZADO">METALIZADO</option>
   </select>
</div>

<div class="span3">
   <label for="camada">Orientação da Impressão<span class="required"></span></label>
   <input class="span12" name="camada" id="camada" style="text-transform:uppercase" value="" >
</div>

Browser other questions tagged php javascript html

You are not signed in. Login or sign up in order to post.