Input field filled in according to the selected selection

Question

Input field filled in according to the selected selection

Navigation

#1 by (0 votes)

-1

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

If the option "TRANSPARENT" or "FOSCO" is selected, the field input "Print Orientation" will be filled with the text "INTERNAL". If the option "PEARL" or "METALLIC" is chosen, the input will be filled with the text "EXTERNAL".

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

asked by anonymous 19.10.2018 / 19:17

1 answer

I want to convert Timedelta to float ANDROID STUDIO DOES NOT UPDATE [closed]

score 0 · Accepted Answer

Get the value of the option
Compare to the appropriate values
inject no value of input return of 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>