1

Olá, estou desenvolvendo um site, e queria que quando o usuário selecionasse a opção OUTRA, abrisse uma caixa de texto para ele digitar, porém não estou conseguindo, alguém pode ajudar?

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>

3 Respostas 3

0

Pelo document.getElementById("id_do_elemento").style.visibility, onde os valor de configuração pode varia como descrito em tabela abaixo:

+----------+--------------------------------------------------------------+
| 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                          |
+----------+--------------------------------------------------------------+

no caso da pergunta os dois valores são visible e hidden, exemplo:

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>

Referencia

3
  • Muito obrigado, dessa forma deu certo!! Commented 6/09/2017 às 0:00
  • Mas porque usando o if não da certo, da forma que eu tinha feito? Commented 6/09/2017 às 0:00
  • Entendi, mudei agora o parâmetro para obj e deu certo usando o if, muito obrigado mesmo!!! Commented 6/09/2017 às 0:10
0

Com javascript puro

Utilizado o evento onChange para que seja realizada determinada ação após alguma mudança.

  • display, é uma propriedade do CSS que é responsável pela maneira como os elementos serão exibidos.
  • display: block por padrão, são aqueles que são renderizados no browser
  • display: none, esconde o elemento em questão

    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>



Com 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>

-2
<script>
function myOutorga(that) {
var text;
var text2;
// If the that.value is "Renovação de Dispensa ou Renovação de Outorga"
if (that.value === "Renovação de Dispensa" || that.value === "Renovação de Outorga") {
text = "Nº PROCESSO: ";
document.getElementById("demo").style.display = "block";
document.getElementById("demo").innerHTML = text;
document.getElementById("outrainst").style.display = "block";
text2 = "Nº DECLARAÇÃO:";
document.getElementById("demo2").style.display = "block";
document.getElementById("demo2").innerHTML = text2;
document.getElementById("outrainst2").style.display = "block";
 // esconder outros
 // document.getElementById("outrainst").style.display = "none";
// If the that.value is "Outros"
} else if (that.value === "Outros") {
 text = "Outros:";
 document.getElementById("demo").innerHTML = text;
 document.getElementById("demo2").style.display = "none";
 // mostra outros
    document.getElementById("outrainst").style.display = "block";
    document.getElementById("outrainst2").style.display = "none";
 // If the that.value is anything else
} else {
// esconder Renovação de Dispensa ou Renovação de Outorga
// esconder outros
document.getElementById("outrainst").style.display = "none";
document.getElementById("outrainst2").style.display = "none";
document.getElementById("demo").style.display = "none";
document.getElementById("demo2").style.display = "none";
}

}
</script>
1
  • Aperfeiçoei para duas caixa de texto, mas não consegui alinhar os textos com a caixa será que alguém de uma ideia? Commented 14/08/2022 às 18:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .