Quiero enviar un formulario sin actualizar

aquí está el código:

 <form id="rout" > <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">your id</label> <input type="text" class="form-control" onchange="" id="exampleInputEmail1" aria-describedby="emailHelp"> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">first name</label> <input type="text" class="form-control" id="exampleInputPassword1"> </div> <div class="mb-3"> <label for="exampleInputPassword111" class="form-label">last name </label> <input type="text" class="form-control" id="exampleInputPassword111"> </div> <div class="d-grid gap-2"> <button id="btbtbt" class="btn btn-primary" type="submit" style="text-decoration: none "> submit </button> </div> </form> <script> const myForm = document.getElementById("rout"); myForm.addEventListener("submit", (e)=>{ e.preventDefault(); const req = new XMLHttpRequest(); req.open("post","router.php"); req.onload= function (){ console.log(req.responseText); } req.send(new FormData(myForm)); }); </script>

centrarse en la parte del guión

esto es lo que tengo:

Sé que este código funciona

Lo probé antes

pero no funciona aquí

¿Cuál podría ser la razón?