How to make a text box appear when selecting a select option

Asked

Viewed 1,345 times

1

Hi, I’m developing a website, and I wanted when the user selects the OTHER option, open a text box for him to type, but I’m not getting, someone can help?

function mostraCampo(this) {
      var select = document.getElementById('instituição')
      if (select == 'OUTRA') {
        document.getElementById("outrainst").style.visibility = "visible";
      } else{
        document.signup.outrainst.style.visibility = "hidden";
      }
    }

<div class="form-group">                
          <label> Instituição de ensino <br />
            <select class="form-group" name="instituição" id="instituição" onchange="mostraCampo(this.value);">
              <option value="UFTM">UFTM</option>
              <option value="UNIUBE">UNIUBE</option>
              <option value="FACTHUS">FACTHUS</option>
              <option value="SENAI">FAZU</option>
              <option value="IMEPAC">IMEPAC</option>
              <option value="NENHUMA">NENHUMA</option>
              <option value="OUTRA">OUTRA</option>
            </select>
            <input type="text" class="form-control" name="outrainst" id="outrainst" style="visibility: hidden;">
          </label>
        </div>
javascript html bootstrap

2 answers

0


For Document.getElementById("id_do_elemento").style.visibility, where the setting value can vary as described in table below:

+----------+--------------------------------------------------------------+
| Valor    | Descrição                                                    |
+----------+--------------------------------------------------------------+
| visible  | Visualiza o elemento, configuração padrão                    |
+----------+--------------------------------------------------------------+
| hidden   | Esconde o elemento                                           | 
+----------+--------------------------------------------------------------+
| collapse | Quando usado com tabela, o elemento é escondido              |
+----------+--------------------------------------------------------------+
| initial  | Valor inicial do elemento                                    |
+----------+--------------------------------------------------------------+
| inherit  | Herda do elemento pai                          |
+----------+--------------------------------------------------------------+

in the case of the question the two values are visible and hidden, example:

function mostraCampo(obj) {
  var select = document.getElementById('instituição');
  var txt = document.getElementById("outrainst");
  txt.style.visibility = (select.value == 'OUTRA') 
      ? "visible"
      : "hidden";  
}
<div class="form-group">
  <label> Instituição de ensino <br />
  <select class="form-group" name="instituição" id="instituição" onchange="mostraCampo(this);">
       <option value="UFTM">UFTM</option>
       <option value="UNIUBE">UNIUBE</option>
       <option value="FACTHUS">FACTHUS</option>
       <option value="SENAI">FAZU</option>
       <option value="IMEPAC">IMEPAC</option>
       <option value="NENHUMA">NENHUMA</option>
       <option value="OUTRA">OUTRA</option>
  </select>
  <input type="text" class="form-control" name="outrainst" id="outrainst" style="visibility: hidden;">
  </label>
</div>

Reference

  • Thank you very much, that way it worked!!

  • But why using the if not right, the way I had done?

  • I get it, I just changed the parameter to obj and it worked using if, thank you very much!!!

0

With pure javascript

Used the event onChange to carry out certain action after some change.

  • display, is a CSS property that is responsible for the way the elements will be displayed.
  • display: block by default, are those that are rendered in the browser
  • display: none, hides the element in question

    function yesnoCheck(that) {
        if (that.value == "OUTRA") {
            document.getElementById("outrainst").style.display = "block";
        } else {
            document.getElementById("outrainst").style.display = "none";
        }
    }
    <div class="form-group">                
          <label> Instituição de ensino <br />
            <select class="form-group" name="instituição" id="instituição" onchange="yesnoCheck(this);">
              <option value="UFTM">UFTM</option>
              <option value="UNIUBE">UNIUBE</option>
              <option value="FACTHUS">FACTHUS</option>
              <option value="SENAI">FAZU</option>
              <option value="IMEPAC">IMEPAC</option>
              <option value="NENHUMA">NENHUMA</option>
              <option value="OUTRA">OUTRA</option>
            </select>
            <input type="text" class="form-control" name="outrainst" id="outrainst" style="display:none;">
          </label>
        </div>

With Jquery

$(document).ready(function(){
 $("#instituição").change(function(){
    // Verificando se o valor atual é "OUTRA"
    if($(this).val() === "OUTRA"){
        // mostra o input
        $("#outrainst").show();
    }else{
        // esconde
        $("#outrainst").hide();
    }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">                
          <label> Instituição de ensino <br />
            <select class="form-group" name="instituição" id="instituição">
              <option value="UFTM">UFTM</option>
              <option value="UNIUBE">UNIUBE</option>
              <option value="FACTHUS">FACTHUS</option>
              <option value="SENAI">FAZU</option>
              <option value="IMEPAC">IMEPAC</option>
              <option value="NENHUMA">NENHUMA</option>
              <option value="OUTRA">OUTRA</option>
            </select>
            <input type="text" class="form-control" name="outrainst" id="outrainst" style="display:none;">
          </label>
        </div>

Browser other questions tagged javascript html bootstrap

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