Show and hide field based on SELECT

Question

Show and hide field based on SELECT

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I developed a PHP code that queries a table in the database and inserts the values into a select into the HTML.

Since the user does not find the desired option within this select , he should select the "Instituição não encontrada" option and then a label (id="lblCadastrarInstituicao") and a input (id="cadastrarInstituicao") should no longer be hidden. If the user selects the "Instituição não encontrada" option and then switches to another option, the label and input that I mentioned should return to hidden mode.

I have a similar function on another page and it works normally, the only difference is that the other page does not query that database. On this page the code is working differently in different browsers, even though I am not caching.

In Mozilla Firefox, the system drops label from hidden mode, but input does not. If I switch to an option other than "Instituição não encontrada" , label does not return to hidden mode.

InGoogleChrome,thesystemisnottakingneitherthelabelnortheinputofthehiddenmode,regardlessoftheoptionselected.

IhavereviewedseveralStackOverflowPTpublicationsandothersitestounderstandwhatiswrong,butIhavenotbeenabletoidentifytheproblem.

BelowistheJavaScriptfunction:

functioncadastrarInstituicao(){//AbreafunçãoquemostraocampoCadastrarInstituicaoseaopçã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

PHP / HTML code:

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

javascript html

asked by anonymous 17.07.2017 / 17:17

2 answers

1

As commented by colleague Júlio Neto, you can insert the function directly into the onchange event of the select element. See the example below:

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>

Realize that PHP code has no influence on the problem, so in the next few questions, try to be more accurate in what you need. If the problem is with HTML or JavaScript, just post the HTML and JavaScript codes. With the PHP code we can not reproduce the problem, which makes the answer difficult.

17.07.2017 / 17:41

C # is not finding / recognizing my List Convert and save time in bank with PHP

score 1 · Accepted Answer

Put label and input inside a 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>