button to show / hide div

Navigation
-1

I have a div that I would like to hide and display through a button. However when I click this button, instead of hiding / displaying the div, the form ends up being sent. See the code snippet below: 

<form name="form1" class="form-horizontal" method="POST" action="salvar_dados.php">

    <button id="btnExibeOcultaDiv" class="btn btn-info"   onclick="ocultarExibir();">Exibe_Oculta</button>
    <br/>

    <div class="col-md-1" id="dvPrincipal"><!-- Div principal-->

            <label for="qtd_bola_azul">Bola Azul</label>
        <input class="form-control" id="qtd_bola_azul" name="qtd_bola_azul" value="0" type="number"/>

    </div><!-- Fim Div principal-->

    <button type="submit" class="btn btn-success" id="sendListaAluno">Enviar Lista</button>


</form>

<script type="text/javascript">

            var visibilidade = true; //Variável que vai manipular o botão Exibir/ocultar


            function ocultarExibir(){ // Quando clicar no botão.

                if(visibilidade){//Se a variável visibilidade for igual a true, então...
                    document.getElementById("dvPrincipal").style.display = "none";//Ocultamos a div
                    visibilidade = false;//alteramos o valor da variável para falso.
                }else{//ou se a variável estiver com o valor false..
                    document.getElementById("dvPrincipal").style.display = "block";//Exibimos a div..
                    visibilidade = true;//Alteramos o valor da variável para true.
                }
            }
</script>
    
asked by anonymous 26.10.2018 / 22:41

2 answers

1

Since you're using Bootstrap, you can use jQuery features that make it much easier with the .toggle () method. , which toggles between show and hide an element, without the need to use onclick or put type="button" on the button. In addition to significantly reducing lines of code.

Just create an event .click for the button and .toggle() on the div: 

$("#btnExibeOcultaDiv").click(function(e){
   e.preventDefault(); // evita que o formulário seja submetido
   $("#dvPrincipal").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<form name="form1" class="form-horizontal" method="POST" action="salvar_dados.php">

    <button id="btnExibeOcultaDiv" class="btn btn-info">Exibe_Oculta</button>
    <br/>

    <div class="col-md-1" id="dvPrincipal"><!-- Div principal-->

            <label for="qtd_bola_azul">Bola Azul</label>
        <input class="form-control" id="qtd_bola_azul" name="qtd_bola_azul" value="0" type="number"/>

    </div><!-- Fim Div principal-->

    <button type="submit" class="btn btn-success" id="sendListaAluno">Enviar Lista</button>


</form>
    
26.10.2018 / 23:49
1

Add type="button" to the button: 

<button type="button" id="btnExibeOcultaDiv" class="btn btn-info"   onclick="ocultarExibir();">Exibe_Oculta</button>
    
26.10.2018 / 23:01
Collection of an Object doing calculations with BigDecimal How does Oracle act after running a PHP script without commit? [closed]