Tengo un formulario que solicita datos de usuario (nombre) y luego, cuando hacen clic en el botón "verificar", el formulario será reemplazado por un div y mostrará el nombre en él. Luego, cuando el usuario hace clic en el botón "editar", el usuario vuelve al formulario pero con los datos ingresados anteriormente. Quiero saber cómo mostrar los detalles en el formulario.
<html> <body> <div id="container"> <h2 id="heading">Query Form</h2> <br> <div id="formdiv"> <form id="form" method="POST"> <div> <label for="name">Name: </label> <input id="name" name="name" type="text"> </div> <br> <button id="checkbutton" onclick=submitform()>Check</button> <input type="submit" id="formbutton" value="Submit" onclick=validateForm()> </form> </div> <div id="for_replacement"> <div id="display_replacment" style="display: none;"> <form> <label for="name_submit">Name: </label><span id="name"></span> <span id="display_name"></span><br><br> <input type="submit" id="formbutton" value="Edit" onclick="editform()"> </form> </div> </div> <script> function validateForm() { var formrefresh = document.getElementById("form"); function handleForm(event) { event.preventDefault(); } var namevalidate = document.getElementById("name").value; if(namevalidate.length == 0) { alert("Please Enter Name"); formrefresh.addEventListener("submit", handleForm); return; }else { form.action = "mailto:mail@gmail.com" } } function submitform() { globalThis.name = document.getElementById("name").value; document.getElementById('container').innerHTML = document.getElementById("display_replacment").innerHTML; document.getElementById("display_name").innerText = name; } function editform() { alert(globalThis.name); } </script> </body> </html>Lo que debería suceder es que cuando se hace clic en editar, los datos ingresados en el formulario deben mostrarse nuevamente en el formulario para editar.
En lugar de eliminar el formulario, ¿por qué no configura su visualización en ninguno?
document.getElementById('heading').style.display = "none"; document.getElementById('form').style.display = "none"; document.getElementById('display_replacment').style.display = "block";y cuando quieras la recuperas al revés
document.getElementById('heading').style.display = "block"; document.getElementById('form').style.display = "block"; document.getElementById('display_replacment').style.display = "none"; y puede obtener el nombre de display_name :
const name =document.getElementById("display_name").innerText; document.getElementById("name").value = name;