1

Hace poco comencé a aprender desarrollo web y me da mucha curiosidad hacer formularios. Quise hacer uno en HTML que enviase un alerta con el contenido que ponga un usuario, pero no sé como hacerlo.

Este es el código que estoy utilizando:

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Pagina Hipotetica</title>
  </head>
  <body>

    <form class="form" action="prototipo.html" method="post">
      <input type="text" name="texto" value="">
      <input type="submit" name="enviar" value="Enviar" onclick="enviarAlerta();">
    </form>

  <script type="text/javascript">
    function enviarAlerta(){
      let dato = document.getElementsByName('texto').value.html;
      return alert(dato);
    }
  </script>
  </body>
</html>

Al momento de utilizar el código y enviar los datos, debería reproducirse la función de JS. Sin embargo, lo que hace es actualizar la página. ¿Existe alguna forma de hacerlo?

3 respuestas 3

2

Lo único que debes hacer es cambiar el tipo de botón de submit a button, de esta forma evitarás la acción por defecto del formulario y no te refrescará la página.

Ahora para pintar el valor ingresado por el usuario, como estás utilizando un selector por medio del atributo name debes indicar el índice del elemento ya que este selector retorna un array de elementos.

Adicional a esto, como estás usando un alert no necesitas colocar el return y la forma correcta de capturar un valor de un input (o de cualquier elemento de formulario) es usando únicamente .value no .value.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Pagina Hipotetica</title>
  </head>
  <body>

    <form class="form" action="prototipo.html" method="post">
      <input type="text" name="texto" value="">
      <input type="button" name="enviar" value="Enviar" onclick="enviarAlerta();">
    </form>

  <script type="text/javascript">
    function enviarAlerta(){
      let dato = document.getElementsByName('texto')[0].value;
      alert(dato);
    }
  </script>
  </body>
</html>

0

puedes probar manejando todo el proceso de submit desde javascript y llamar e.preventDefault() para evitar que el submit recargue la pagina.

var form = document.getElementById('form');

function submitHandler(e) {
  let dato = document.getElementsByName('texto')[0].value;
  console.log(dato);
  e.preventDefault();
}

form.addEventListener("submit", submitHandler);
<form class="form" id="form">
  <input type="text" name="texto" value="">
  <input type="submit" name="enviar" value="Enviar">
</form>

Otra cosa es que estas llamando getElementsByName y este te retorna no uno si no varios elementos por lo que es necesario decirle que la posición es 0 (el primer elemento) para poder obtener el valor del campo name, yo te recomendaría usar getElementById('') para obtener el valor de ese elemento.

var form = document.getElementById('form');

function submitHandler(e) {
  let dato = document.getElementById('texto').value;
  console.log(dato);
  e.preventDefault();
}

form.addEventListener("submit", submitHandler);
<form class="form" id="form">
  <input type="text" id="texto" value="">
  <input type="submit" name="enviar" value="Enviar">
</form>

0

Puedes obtener el valor de esta manera...

--- En tu formulario ----

<form class="form" action="prototipo.html" method="post">
      <input type="text" name="texto" id="textBox" value="">
      <input type="submit" name="enviar" value="Enviar" onclick="enviarAlerta();">
</form>

Javascript ----

let valTextBox = document.getElementById('textBox').value; 

Luego puedes poner el resultado en tu consola, una alerta o un contenedor

console.log(valTextBox);

Recuerda programar en un solo idioma, solo ingles o solo español juntos se ven mal. Son buenas practicas.

2
  • Por favor, traduce tu respuesta al español. Commented el 4 feb. 2019 a las 19:38
  • Hecho! Gracias por la sugerencia. Commented el 10 jul. 2019 a las 15:18

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.