button to show/hide div

Question

I have a div I’d like to hide and display through a button. However when I click on this button, instead of hiding/displaying the div, the form is 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>

Answer 1

Add type="button" on the button:

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

Answer 2

Since you are using Bootstrap, you can use the features of jQuery which makes it much easier with the method .toggle(), alternating between show and hide an element, no need to use onclick or put type="button" button. In addition to significantly reducing lines of code.

Just create an event .click to the button and the .toggle() in 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>
<script src="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>