Estoy tratando de codificar mi contraseña en el lado del cliente antes de enviarla a mi servidor (servidor Tomcat), cuando hago clic en enviar, el formulario se envía antes de actualizar el valor de la contraseña al código hash. ¿Cómo puedo asegurarme de que mi formulario? se envía después de ejecutar el script? o hay una mejor manera de ir por esto?
<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1></h1> <form method="post" onsubmit="encrypt(event);" action="login" > <input type="text" name="user_id"> <input type="password" name="password" id="pass"> <button id="but1" type="submit">submit</button> </form> <script> function encrypt(event){ // event.preventDefault();//prevents from form getting auto submitted document.querySelector("body").style.color="red"; sha512(document.getElementById("pass").value).then((x)=> { document.getElementById("pass").value=x; document.querySelector("h1").innerHTML = x; }); } function sha512(str) { return crypto.subtle.digest("SHA-512", new TextEncoder("utf- 8").encode(str)).then(buf => { return Array.prototype.map.call(new Uint8Array(buf), x=> (('00'+x.toString(16)).slice(-2))).join(''); }); } sha512("my string for hashing").then(x => console.log(x)); </script> </body> </html>Envíe su formulario después del proceso
<form id="form1" method="post" onsubmit="encrypt(event);" action="login" > <input type="text" name="user_id"> <input type="password" name="password" id="pass"> <button id="but1" type="submit">submit</button> </form> function encrypt(event) { event.preventDefault(); //prevents from form getting auto submitted document.querySelector("body").style.color = "red"; sha512(document.getElementById("pass").value).then((x) => { document.getElementById("pass").value = x; document.querySelector("h1").innerHTML = x; document.getElementById("form1").submit(); // submitting the form }); }