Div1 disappear and div2 appear when clicking the button

Question

Good Night, I have a small problem, actually I do not know how to solve I’m beginner rs, I have two tables in two different Ivs, one becomes visible div1 and the other invisible div2 and when I click the button I hide the visible div(div1) and show the invisible div(div2) with the new query of the bank, but when I click on the button the page gives refresh,and the div2 that should appear it stays for two seconds on the screen and disappears, and the visible (div1) of the beginning appears again. As I do that even with the refresh when you click the invisible div (div2) appears and the other visible (div1) disappears. Who can help me thank you. My code is like this:

<style>
#div2{display:none;}
</style>

<script>
  function ocultar(){
        document.getElementById("div1").style.display = "none";
        document.getElementById("div2").style.display = "block";
      }

</script>

//botão de trazer consulta do banco e ocultar e mostrar as div
 <button type="submit" onclick="ocultar();">Buscar</button>

<div id="div1">//essa div fica visivel</div>

<div id="div2">//essa div fica invisivel, e ao clicar no botão a div1 

should disappear and appear only this with the bank query, only with the refresh she appears for two seconds, and again appears the div1

Answer 1

Your button is of the type Submit. Whenever you click it will refresh the page and load everything the way you wrote. To consult the bank without loading the page you can use AJAX.