Java Script

Cómo enviar un formulario con Java Script y jQuery

Java Script es un lenguaje muy poderoso, utilizado especialmente en el frontend para realizar páginas dinámicas que puedan brindar una mejor usabilidad a los usuarios, es por eso que en este breve tutorial vamos a ver como solucionar un problema muy frecuenta que se pueden encontrar los desarrolladores, el cual consiste en enviar un formulario utilizando Java Script y jQuery.

Código para enviar un formulario con Java Scipt

Vamos a empezar con el código para enviar el formulario utilizando el lenguaje de programación Java Script, primero crearemos un formulario HTML muy sencillos, seguido de la función que va a realizar el envío.

<html>
  <head>
    <title>Enviar un formulario con Java Script y jQuery</title>
  </head>
  <body>
    <form id="form" action="page.php">
      <input type="text" name="texto">
      <button type="submit" onclick="submitform(); return false;">Enviar formulario</button>
    </form>
    <script>
      function submitform(){
      	alert("Formulario enviado desde Java Script");
      	document.getElementById('form').submit();
      }
    </script>
  </body>
</html>

Del código mencionado es muy importante ver que el botón del formulario se encarga de hacer el envío aprovechando a través onclick, además es muy importante no olvidarse de incluir el return false ya que eso evita que el formulario se envie automáticamente sin ejecutar la función submitform de Java Script, otra forma de evitar eso es usar un input de type button como botón.

Código para enviar un formulario con jQuery

La versión anterior fue realizada en Java Script sin ningún tipo de librerías, en esta ocasión realizamos la misma función pero utilizando jQuery.

<html>
  <head>
    <title>Enviar un formulario con Java Script y jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <form id="form" action="page.php">
      <input type="text" name="texto">
      <input id="button" type="button" value="Enviar formulario"/>
    </form>
    <script>
	$("#button").click(function(event){
	  alert("Formulario enviado con jQuery");
	  $('#form').submit();
	});
    </script>
  </body>
</html>

Esas son dos formas posibles para enviar un formulario, esto se puede utilizar mucho cuando se necesita realizar validaciones o simplemente cuando se requiere ejecutar algún proceso o verificación antes de hacer el envío de los datos.

Espero que les haya servido y antes cualquier inconveniente no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *