Good day, I have a problem, I have a web page which in its responsiveness has a toggle button (the classic bar button) to open the menu on mobile devices, but when pressing the button it starts to open the menu but at the same time the page is reloaded which removes it from me again, I would like to know how I can prevent the page from reloading, it should be noted that it worked for me at first :( haha and I don't know how this happens now I send a script of the toggle if it helps
<body>
<header class="header">
<form action="" method="post">
<nav class="header_menu">
<a title="CLINIKMED" href=""><img src="imgs/logo.jpg" id="Logo" alt="CLINIKMED"></a>
<button class="nav-toggle" aria-label="abrir menú"><i class="fa-solid fa-bars"></i></button>
<ul class="nav-menu">
<li>
<button type="submit" name="rute" value="" ><b>INICIO</b></button>
</li>
<li>
<button type="submit" name="rute" value="" ><b>PACIENES</b></button>
</li>
<li>
<b class="tituloshead">MEDICOS</b>
<ul class="submenu">
<li><button type="submit" name="rute" value="Forms/InsertMedicos.php" ><b>AGREGAR</b></button></li>
<li><button type="submit" name="rute" value="Forms/ConsultaMedicos.php" ><b>CONSULTAR</b></button></li>
</ul>
</li>
<li>
<button type="submit" name="rute" value="" ><b>PATOLOGIA</b></button>
</li>
<li>
<button type="submit" name="rute" value="" ><b>RECETAS</b></button>
</li>
<li>
<button type="submit" name="rute" value="" ><b>PRESENTACIONES</b></button>
</li>
<li>
<button type="submit" name="rute" value="" ><b>CONSULTAS</b></button>
</li>
<li class="cerrar-sesion">
<a href="../includes/logout.php">
<b>CERRAR SESION</b>
</a>
</li>
</ul>
</nav>
</form>
</header>
</body>
<script defer>
const button = document.querySelector(".nav-toggle")
const menu = document.querySelector(".nav-menu")
button.addEventListener("click", () =>{
menu.classList.toggle("header_menu_visible")
})
</script>
<?php
if (isset($_POST['rute'])) {
$_SESSION['rute']=$_POST['rute'];
}
?>
The problem is the following:
Because that button is inside a
<form>
which it interprets to be the form's submit button, the solution would be to add the type property to the button so that it looks like this:That would be enough so that it does not have the effect of reloading .
I hope this answer helps you.