Estoy empezando a aprender JavaScript (proveniente de C++, Java, Python) y me enfrento al siguiente problema. Quiero hacer una página de inicio de sesión simple y pasar los parámetros como nombre de usuario y contraseña. Con el método POST, todo funciona. Aún así, quería probar con el método GET donde los parámetros se colocarán en la URL, solo para ver la diferencia. El problema es que la función JS siempre lee valores antiguos, por lo que al principio, después de hacer clic en enviar, lee nulo tanto para el nombre de usuario como para la contraseña (porque el enlace de inicio no tiene ningún parámetro) y luego siempre lee los antiguos. Parece que la URL no se actualiza antes de que se ejecute el script JS.
¿Alguna idea sobre cómo resolver esto?
function validate() { var queryString = window.location.href; var url = new URL(queryString); var username = url.searchParams.get('username') var password = url.searchParams.get('password') console.log(username); console.log(password); if (username == "admin" && password == "admin") { alert("login successfully"); } else { alert("login failed"); } } <form class="box" action="login.html" method="GET"> <input type="text" name="username" placeholder="Enter your username" id="username"> <br> <input type="password" name="password" placeholder="Enter your password" id="password"> <br> <input type="submit" name="" value="Login" onclick="validate()"> </form>Separe el código en dos archivos, uno para home.html que contiene los elementos de la interfaz de usuario y el envío del formulario pasará los datos a otro archivo login.html . Además, eliminar el evento de clic como ya está en el formulario de tipo de envío enviará automáticamente los datos a login.html proporcionados en la acción de envío.
Iniciar sesión.html
<script> var queryString = window.location.href; var url = new URL(queryString); var username = url.searchParams.get("username"); var password = url.searchParams.get("password"); console.log(username); console.log(password); if (username == "admin" && password == "admin") { alert("login successfully"); } else { alert("login failed"); } </script>inicio.html
<form class="box" action="login.html" method="GET"> <input type="text" name="username" placeholder="Enter your username" id="username"> <br> <input type="password" name="password" placeholder="Enter your password" id="password"> <br> <input type="submit" name="" value="Login"> </form>