Show or hide a div according to the selected option

Navigation
0

I'm working with a registration system, where all employees will be registered, but not everyone will have access to the program. For this, I'm using a select with the level of access it 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, he will need a user to log in. I am showing or hiding the user field using this JavaScript function: 

<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 switch from "Administration" to "No Access", for example, the field is still there. How do I check each time the option is changed?

    
asked by anonymous 05.09.2017 / 15:18

3 answers

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";
    }
    
05.09.2017 / 15:40
1

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";
        }
    }

One tip: If you want to work with real-time interactions, you can use AngularJS, a cool JS framework that will help you a lot in this!

5 minutes of this tutorial can solve your problem and many more: link

    
05.09.2017 / 15:47
0

Friend for this you will need to use PHP ... make the login scheme and put the condition so that, if the user is logged in, print on the screen the part that you want him to see ... will need a database tb to save the information or just does a function in javascript, saves the data into a variable. The function for this is the prompt ();

    
05.09.2017 / 15:28
System.Configuration Reference Read the txt and return it all in a String in Java [duplicate]