Show or hide a div as selected option

Question

I’m working with a registration system, where all employees will be registered, but not all will have access to the program. For that, I’m using a select with the level of access he will have.

<div class="form-group">
    <label for="nivel_acesso" class="col-sm-2 control-label">Nível de Acesso</label>
    <div class="col-sm-2">
        <select class="form-control" id="nivel_acesso" required onchange="option_check()">
            <option value="">Selecione</option>
            <option value="0">Sem Acesso</option>
            <option value="1">Administração</option>
            <option value="2">Informática</option>
        </select>
    </div>
</div>
<div class="form-group" id="hidden_div" style="display:none;">
    <label for="usuario" class="col-sm-2 control-label">Usuário</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" name="usuario" placeholder="Usuário" required>
    </div>
</div>

For example, if I want to register an employee who will have access to the administration part, they will need a user to log in. I am showing or hiding the user field using this function of Javascript:

<script type="text/javascript">
    function option_check(){
        if(document.getElementById("nivel_acesso").value != "0" && document.getElementById("nivel_acesso").value != ""){
            document.getElementById("hidden_div").style.display = "block";
        }
    }

And it works the first time, however, if I change from "Administration" to "No Access", for example, the field is still there. How do I check each time the option is changed?

Answer 1

False case hide again...

if(document.getElementById("nivel_acesso").value != "0" && document.getElementById("nivel_acesso").value != ""){
            document.getElementById("hidden_div").style.display = "block";
        }else{
     document.getElementById("hidden_div").style.display = "none";
    }

Answer 2

Just enter an "Else" condition, to disable the text field if it is already displayed...

    function option_check(){
        if(document.getElementById("nivel_acesso").value != "0" && document.getElementById("nivel_acesso").value != ""){
            document.getElementById("hidden_div").style.display = "block";
        } else {
            document.getElementById("hidden_div").style.display = "none";
        }
    }

A tip: If you want to work with real time interactions, you can use Angularjs, a nice JS framework that will help you a lot in this!

5 minutes of this tutorial can already solve your problem and many others: https://www.w3schools.com/angular/

Answer 3

Friend for this You will need to use PHP...makes the login scheme and sets the condition so that if the user is logged in, print on the screen the part that Voce wants to see...will need a database tb to save the information or only does a function in javascript,saves the data in a variable. the function for this is the prompt();