¿Cómo pasar datos de un formulario HTML a JavaScript?

publicado por: Anonymous

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?

solución

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

_x000D_

_x000D_

<!DOCTYPE html>_x000D_
<html lang="en" dir="ltr">_x000D_
  <head>_x000D_
    <meta charset="utf-8">_x000D_
    <title>Pagina Hipotetica</title>_x000D_
  </head>_x000D_
  <body>_x000D_
_x000D_
    <form class="form" action="prototipo.html" method="post">_x000D_
      <input type="text" name="texto" value="">_x000D_
      <input type="button" name="enviar" value="Enviar" onclick="enviarAlerta();">_x000D_
    </form>_x000D_
_x000D_
  <script type="text/javascript">_x000D_
    function enviarAlerta(){_x000D_
      let dato = document.getElementsByName('texto')[0].value;_x000D_
      alert(dato);_x000D_
    }_x000D_
  </script>_x000D_
  </body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *