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.
No Google Chrome, o sistema não está tirando nem o label
nem o input
do modo oculto, independente da opção selecionada.
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>