Estoy haciendo un formulario HTML y soy bastante nuevo en todo esto. Quiero hacerle al usuario diferentes preguntas en un formulario usando un cuadro desplegable y un área de texto. Después de que el usuario seleccione/escriba todas sus respuestas, quiero poder crear un botón en la parte inferior donde el usuario haga clic en él y muestre todas sus entradas sin que tengan que presionar enviar después de cada pregunta.
Estoy completamente perdido y no sé cómo hacer esto en absoluto. Creo que esto incluirá algo de JavaScript del que tampoco sé absolutamente nada, solo sé HTML (novato, todavía practico) y algo de CSS. ¿Alguien puede arreglar mi script/mostrar cómo debería verse? ¡Sería muy apreciado!
<!DOCTYPE html> <HTML> <head> <title>Ttile Ex.</title> </head> <body> <h1>...Certification Creation Form</h1> <div> <label for="Choose">Choose the type of...</label> </div> <div> <select name="type of CSR"> <option>One</option> <option>Two</option> <option>Three</option> </select> </div> <div> <label for ="CN"> Enter the...</label> </div> <div> <textarea cols="50" rows="5"></textarea> </div> <div> <label for ="FQDN"> Enter the FQDN...</label> </div> <div> <textarea cols="50" rows="5"></textarea> </div> <div> <label for ="alternate name"> Enter the alternate name</label> </div> <div> <textarea cols="50" rows="5"></textarea> </div> <div> <label for ="name of cert"> Enter the name you want to give to the cert</label> </div> <div> <textarea cols="50" rows="5"></textarea> </div> <!-- SOME BUTTON HERE TO CLICK AND DISPLAY ALL THEIR INPUT --> </form> </body> </HTML>Traté de encontrar algunos tutoriales sobre cómo hacer esto, pero sería para mostrar solo una de las entradas o después de cada entrada singular:/
Para enviar sus entradas, debe estar dentro de una etiqueta de formulario. La etiqueta de la etiqueta "para" debe ser igual a la etiqueta de entrada "ID" y es una buena práctica poner su JavaScript al final del documento.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="#"> <h1>...Certification Creation Form</h1> <div> <label for="typeOfCSR">Choose the type of...</label> <select name="typeOfCSR" id="typeOfCSR"> <option value="">Select an Option </option> <option value="One">One</option> <option value="Two">Two</option> <option value="Three">Three</option> </select> </div> <div> <label for="CN"> Enter the...</label> <textarea cols="50" rows="5" id="CN"></textarea> </div> <div> <label for="FQDN"> Enter the FQDN...</label> <textarea cols="50" rows="5" id="FQDN"></textarea> </div> <div> <label for="alternateName"> Enter the alternate name</label> <textarea cols="50" rows="5" id="alternateName"></textarea> </div> <div> <label for="nameOfCert"> Enter the name you want to give to the cert</label> <textarea cols="50" rows="5" id="nameOfCert"></textarea> </div> <button type="button" id="review">Review</button> <button type="submit">Submit</button> </form> <br/> <div id="result" style="border: 3px solid black;"> Result will show here</div> <script> const btn = document.getElementById('review'); btn.addEventListener('click',()=>{ let typeOfCSR = document.getElementById('typeOfCSR').value; let CN = document.getElementById('CN').value; let FQDN = document.getElementById('FQDN').value; let alternateName = document.getElementById('alternateName').value; let nameOfCert = document.getElementById('nameOfCert').value; document.getElementById('result').innerHTML = typeOfCSR +"<br/>"+ CN +"<br/>"+ FQDN +"<br/>"+ alternateName +"<br/>"+ nameOfCert; }) </script> </body> </html>Sí, necesita javascript básico para imprimir el resultado o ingresar en la misma página. Acabo de agregar JS en su código, por favor revise esto-
<!DOCTYPE html> <HTML> <head> <title>Ttile Ex.</title> </head> <script> function testVariable() { var strText = document.getElementById("textone").value; var strText1 = document.getElementById("textTWO").value; var strText3 = document.getElementById("textThree").value; var result = strText + ' ' + strText1 + ' ' + strText3; document.getElementById('spanResult').textContent = result; } </script> <body> <h1>...Certification Creation Form</h1> <div> <label for="Choose">Choose the type of...</label> </div> <div> <select name="type of CSR"> <option>One</option> <option>Two</option> <option>Three</option> </select> </div> <div> <label for="CN"> Enter the...</label> </div> <div> <textarea cols="50" id="textone" rows="5"></textarea> </div> <div> <label for="FQDN"> Enter the FQDN...</label> </div> <div> <textarea cols="50" id="textTWO" rows="5"></textarea> </div> <div> <label for="alternate name"> Enter the alternate name</label> </div> <div> <textarea cols="50" id="textThree" rows="5"></textarea> </div> <div> <label for="name of cert"> Enter the name you want to give to the cert</label> </div> <div> <textarea cols="50" rows="5"></textarea> </div> <!-- SOME BUTTON HERE TO CLICK AND DISPLAY ALL THEIR INPUT --> <button onclick="testVariable()">Submit</button> <br /> <span id="spanResult"> </span> </form> </body> </HTML>Por favor revisa el código