2

Necesito pedirle al usuario el nombre y apellidos en un formulario simple y al aceptarlo que salga una ventana emergente donde se pregunte: ¿Es usted "apellidos", "nombre"?. Es decir preguntarle con los datos que ha escrito. Tengo el siguiente código html, pero no sé como conoseguir :

<html>
<head>
    <title></title>
    </head>
    <body>
<form>
    <div>
        <label>Nombre:</label><input name="nombre" type="text"><br>
    </div>
    <div>
        <label>Apellidos:</label><input name="apellidos"type="text">
    </div>
    <input type=button onclick="pregunta()" value="Enviar">
</form>
    <script type="text/javascript">
    function pregunta(){
    if (confirm('¿Es usted "apellidos", "nombre" ?')){
       document.tuformulario.submit()
    }
    }
        </script>
    </body>
</html>

Espero que me podais ayudar! Muchas gracias.

3
  • Bienvenida, y lo primero de todo hay 2-3 errores de sintaxis (aunque te compile el programa). Vamos a ellos: 1) te falta cerrar la etiqueta <form>, y las declaraciones de los tipos de datos name type var va con el símbolo "=", no con el ":".
    – omaza1990
    Commented el 23 abr. 2020 a las 11:24
  • Hola @omaza1990 gracias por tu comentario. He arreglado los errores, pero aun así no consigo que en la pregunta se tenga en cuenta la respuesta del usuario. No sé como puedo mencionarlo.
    – Raquel
    Commented el 23 abr. 2020 a las 11:34
  • Acabo de darte una solución. Espero que la entiendas, cualquier duda no dudes en preguntar.
    – omaza1990
    Commented el 23 abr. 2020 a las 11:37

3 respuestas 3

2

En el comentario anterior te solucioné algunos errores de sintaxis. Bien, una posible solución es la siguiente.

Realmente cuando haces el if (confirm('¿Es usted "apellidos", "nombre" ?')){ no le estás pasando los datos recogidos del formulario, estás escribiendo un comentario realmente.

Para recoger los datos escritos en los inputs tenemos que seleccionarlo mediante el id (getElementsById) o mediante el name (getElementsByName), por ejemplo.

Te adjunto un link para que entiendas la etiqueta getElementsByName, https://developer.mozilla.org/es/docs/Web/API/Document/getElementsByName

<html>
    	<head>
    		<title>Nombre y apellidos</title>
        </head>
        <body>
    		<form>
    			<div>
    				<label>Nombre:</label><input name="nombre" type="text" id="nombre"/><br>
    			</div>
    			<div>
    				<label>Apellidos:</label><input name="apellidos" type="text" id="apellidos">
    			</div>
    			<input type="button" onclick="pregunta()" value="Enviar"/>
    		</form>
    		<script type="text/javascript">
    			function pregunta(){
    			let apellidos = document.getElementsByName('apellidos')[0].value;
    			let nombre = document.getElementsByName('nombre')[0].value;
    			if (confirm("¿Es usted " +apellidos+", "+nombre+ "?")){
    			   document.tuformulario.submit();
    			}
    		}
    		</script>
        </body>
    </html>

1
  • 1
    Muchisimas gracias @omaza1990 ! y gracias por los links con la explicación!
    – Raquel
    Commented el 23 abr. 2020 a las 11:45
0

Puedes leer los valores de los inputs del formulario.

function pregunta(){
  const myForm = document.getElementById("myForm");
  const apellidos = myForm.apellidos.value;
  const nombre = myForm.nombre.value;
    if (confirm(`¿Es usted ${apellidos}, ${nombre} ?`)){
       myForm.submit()
    }
  }
<form id="myForm">
    <div>
        <label>Nombre:</label><input name="nombre" type="text"><br>
    </div>
    <div>
        <label>Apellidos:</label><input name="apellidos"type="text">
    </div>
    <input type=button onclick="pregunta()" value="Enviar">
</form>

1
  • Muchisimas gracias!! Esta solución también me funciona! Estupendo!!
    – Raquel
    Commented el 23 abr. 2020 a las 11:44
0

Esta es una solución poner un id a cada input: En mi solución:

<html>
<head>
  <meta charset="utf-8">
    <title></title>
    </head>
    <body>
<form>
    <div>
        <label>Nombre:</label>
        <input id="nombre" name="nombre" type="text" var="nombre"><br>
    </div>
    <div>
        <label>Apellidos:</label>
        <input id="apellidos" name="apellidos" type="text" var="apellidos">
    </div>
    <input type=button onclick="pregunta()" value="Enviar">
</form>
    <script type="text/javascript">
    function pregunta(){
      let nombre = document.getElementById("nombre").value;
      let apellidos = document.getElementById("apellidos").value;
      console.log(nombre);
      console.log(apellidos);
    if (confirm('¿Es usted '+nombre+', '+apellidos+' ?')){
       document.tuformulario.submit()
    }
    }
        </script>
    </body>
</html>

Te iba a comentar lo de los "=" y ":" pero he visto que te lo han comentado, entonces lo que he hecho es crear un id para cada input y obtener el valor del input por id, guardarlo en variable y concatenar las variables con el texto donde lo quieres mostrar. Espero te sirva.

1
  • 1
    Muchisimas gracias!! Aprecio mucho que me deis soluciones!
    – Raquel
    Commented el 23 abr. 2020 a las 11:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.