0

Desenvolvi um código PHP que faz uma consulta à uma tabela do banco de dados e insere os valores em um select no HTML.

Uma vez que o usuário não encontre a opção desejada dentro desse select, ele deve selecionar a opção "Instituição não encontrada" e então um label (id="lblCadastrarInstituicao") e um input (id="cadastrarInstituicao") devem deixar de ser ocultos. Caso o usuário selecione a opção "Instituição não encontrada" e depois troque para uma outra opção, o label e o input que mencionei devem voltar para o modo oculto.

Tenho uma função semelhante em outra página e ela funciona normalmente, a única diferença é que a outra página não faz essa consulta com banco de dados. Nessa página o código está funcionando de formas diferentes em diferentes navegadores, mesmo eu não estando armazenando cache.

No Mozilla Firefox, o sistema tira o label do modo oculto, mas o input não. Caso eu mude para uma opção diferente de "Instituição não encontrada", o label não volta para o modo oculto.

inserir a descrição da imagem aqui

No Google Chrome, o sistema não está tirando nem o label nem o input do modo oculto, independente da opção selecionada.

inserir a descrição da imagem aqui

Verifiquei vários publicações do Stack Overflow PT e em outros sites para entender o que está errado, mas não consegui identificar o problema.

Segue abaixo a função JavaScript:

function cadastrarInstituicao() {
//Abre a função que mostra o campo CadastrarInstituicao se a opção "Instituição não encontrada" no select instituicao.
    var instituicao = document.getElementById("instituicao").value;
    if (instituicao === 'novaInstituicao') {
        document.getElementById("cadastrarInstituicao").style.display = "block";
        document.getElementById("lblCadastrarInstituicao").style.display = "block";
    } else {
        document.getElementById("cadastrarInstituicao").style.display = "none";
        document.getElementById("lblCadastrarInstituicao").style.display = "none";
    }
}//Fecha a função

Código PHP/HTML:

<label for="instituicao">A unidade pertence a qual instituição?</label>
                    <select name="instituicao" id="instituicao">
                        <!-- Transforma o valor da variável $instituicao em um array e armazena esse array na variável $while. Será criado um option para cada registro na tabela instituicao.  -->
                        <?php while($while = $instituicao->fetch_array()) { ?>
                            <option value="<?php echo $while["id_instituicao"]?>" onclick="cadastrarInstituicao();"> <?php echo $while["nome"]?> </option>
                        <?php }?>
                        <!-- Fazer com que ao selecionar "Cadastrar nova Instituição" seja ativada a função cadastrarInstituicao().-->
                        <option id="novaInstituicao" value="novaInstituicao" onclick="cadastrarInstituicao();">Instituição não encontrada</option>
                    </select><br>

                <label id="lblCadastrarInstituicao" for="CadastrarInstituicao" style="display: none;">Cadastrar Instituição</label>
                    <input type="text" name="cadastrarInstituicao" id="cadastrarInstituicao" style="display: none;"><br><br>
4
  • 1
    Ao invés de usar "block" no valor de display da label e do input, use "inline". o valor padrão para essas tags é inline, usando block, você deve estar quebrando o layout da sua página, por isso os componentes corretos não aparecem. Commented 17/07/2017 às 15:28
  • Júlio, troquei o block por inline na função, conforme sua sugestão. Continua com o mesmo resultado, exceto que agora o Mozilla também não está mostrando o label. Commented 17/07/2017 às 15:30
  • 1
    Outra coisa, que só vi agora, tire o onclick do option, no lugar coloque um onchange no select, com o mesmo conteúdo. onclick é mais para botões e links, quando se usa um select, use onchange. Commented 17/07/2017 às 15:34
  • Júlio, fiz as alterações que você sugeriu e agora quando eu seleciono algum valor dentro do select, o firebug diz que cadastrarInstituicao não é uma função. Isso ocorre com a função dentro do document.ready ou fora dele. Já verifiquei e o arquivo JS que contém a função está corretamente inserido na página por um tag script. Commented 17/07/2017 às 15:39

2 Respostas 2

1

Coloque label e input dentro de uma div

window.onload=function(){
document.getElementById('instituicao').addEventListener('change', function () {
    var style = this.value == 'novaInstituicao' ? 'block' : 'none';
    document.getElementById('hidden_div').style.display = style;
});
}
<label for="instituicao">A unidade pertence a qual instituição?</label>
<select name="instituicao" id="instituicao">
    <option value="1">Instituição 1</option>
    <option value="2">Instituição 2</option>
    <option value="3">Instituição 3</option>
    <option id="novaInstituicao" value="novaInstituicao">Instituição não encontrada</option>
</select><br>

<div id="hidden_div" style="display: none;">
<label id="lblCadastrarInstituicao" for="CadastrarInstituicao">Cadastrar Instituição</label>
<input type="text" name="cadastrarInstituicao" id="cadastrarInstituicao"><br><br>
</div>

1
  • Muito obrigado! Está funcionando perfeitamente! Commented 17/07/2017 às 16:47
1

Como comentado pelo colega Júlio Neto, você pode inserir a função diretamente no evento onchange do elemento select. Veja o exemplo abaixo:

function cadastrarInstituicao() {
    var instituicao = document.getElementById("instituicao").value;

    if (instituicao === 'novaInstituicao') {
        document.getElementById("cadastrarInstituicao").style.display = "block";
        document.getElementById("lblCadastrarInstituicao").style.display = "block";
    } else {
        document.getElementById("cadastrarInstituicao").style.display = "none";
        document.getElementById("lblCadastrarInstituicao").style.display = "none";
    }
}
<label for="instituicao">A unidade pertence a qual instituição?</label>
<select name="instituicao" id="instituicao" onchange="cadastrarInstituicao()">
    <option value="1">Instituição 1</option>
    <option value="2">Instituição 2</option>
    <option value="3">Instituição 3</option>
    <option id="novaInstituicao" value="novaInstituicao">Instituição não encontrada</option>
</select><br>

<label id="lblCadastrarInstituicao" for="CadastrarInstituicao" style="display: none;">Cadastrar Instituição</label>
<input type="text" name="cadastrarInstituicao" id="cadastrarInstituicao" style="display: none;"><br><br>

Perceba que o código PHP não tem influência nenhuma no problema, então nas próximas perguntas, busque ser mais exato no que precisa. Se o problema é com HTML ou JavaScript, poste apenas os códigos HTML e JavaScript. Com o código PHP não temos como reproduzir o problema, o que dificulta a resposta.

3
  • Agradeço pelas sugestões, com certeza seguirei elas nos próximos tópicos. Mas Anderson, colocar a função sendo ativada por um onchange dentro do select fez com que o Firebug indicasse o erro "TypeError: cadastrarInstituicao is not a function". O código JavaScript está em um arquivo chamado dentro do head da página. Commented 17/07/2017 às 15:46
  • 1
    @HugoGuitti consegue postar seu código no jsfiddle.net e mandar o link?
    – Woss
    Commented 17/07/2017 às 15:49
  • Anderson, segue o link: jsfiddle.net/kutjmwr1 Commented 17/07/2017 às 15:58

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 .