Tengo un formulario simple para obtener la dirección de correo electrónico del usuario. Pero también necesito obtener el nombre y la edad de los usuarios y mostrarlos en la página solo una vez. Cuando el usuario envíe su nombre y edad, se mostrará en la misma página usando HTML JavaScript DOM. Ahora lo que debo hacer es evitar que toda la página se actualice una vez que el usuario envíe su correo electrónico porque borrará el nombre y la edad de los usuarios que se proporcionó solo por un tiempo temporal y tampoco necesito almacenarlos. en la base de datos también. ¿Hay alguna idea de cómo hacer eso excepto usar Ajax? ¡Cualquier ayuda será apreciada!
function submitForm(){ if (document.getElementById("age").value > 10){ document.getElementById("postNameText").innerHTML = document.getElementById("name").value; document.getElementById("form2").style.display = "block"; } else { document.getElementById("showData").innerHTML = "You are not eligible to use this site."; } document.getElementById("showData").style.display = "block"; document.getElementById("form1").style.display = "none"; } <form id="form1"> <input type="text" name="name" id="name" placeholder="Name"> <input type="number" name="age" id="age" placeholder="Age"> <button type="button" onclick="submitForm()">Send</button> </form> <h2 id="showData" style="display: none;">Your name is <span id="postNameText"></span> and you are eligible to use this site.</h2> <form action="process.php" method="post" style="display: none;" id="form2"> <input type="email" name="email" id="email" placeholder="Email"> <input type="submit" value="Submit" id="submitData"> </form>¡Gracias!
¡Prueba esto!
function submitForm(){ if (document.getElementById("age").value > 10){ document.getElementById("postNameText").innerHTML = document.getElementById("name").value; document.getElementById("form2").style.display = "block"; } else { document.getElementById("showData").innerHTML = "You are not eligible to use this site."; } document.getElementById("showData").style.display = "block"; document.getElementById("form1").style.display = "none"; } <form id="form1"> <input type="text" name="name" id="name" placeholder="Name"> <input type="number" name="age" id="age" placeholder="Age"> <button type="button" onclick="submitForm()">Send</button> </form> <h2 id="showData" style="display: none;">Your name is <span id="postNameText"></span> and you are eligible to use this site.</h2> <iframe src="email.html" frameborder="0" id="form2" style="display: none;"></iframe> Incluya su segundo formulario dentro de un nuevo archivo HTML llamado email.html y esto evitará que la página se vuelva a cargar.
¡Gracias y un saludo!