feed twitter facebook LinkedIn facebook

JavaScript » Controlar el envío de un formulario con JavaScript

Abril 24, 2009 por Víctor Cuervo . 6528 visitas 2 Comentarios Imprimir Imprimir

Cuando creamos un formulario en HTML es posible que haya ciertas ocasiones en las cuales no nos interese que este no se envíe hasta que los datos cumplan unos requisitos o condiciones mínimas.

Para ello podemos controlar el envío de un formulario con JavaScript. Lo primero que haremos será crear el formulario.

  1.  
  2. <form id="myform" action="enviar.php">
  3. <label for="comando">Comandp: </label>
  4. <input type="text" id="comando"/>
  5. <button>Enviar formulario</button>
  6. </form>
  7.  

Vemos que este formulario se enviará a "enviar.php" cuando pulsemos sobre el botón.

Para interceptar el envío del formulario tenemos que controlar el evento onsubmit del formulario. Al evento onsubmit le asignaremos una función JavaScript que será la encargada de controlar el envío.

  1.  
  2. <form id="myform" action="enviar.php" onsubmit="return enviar();">
  3. </form>
  4.  

En nuestro código estamos asignándole la función enviar(). Es muy importante poner el return delante del nombre de la función, ya que dependiendo del valor que retorne la función se enviará o no el formulario.

Si la función retorna true, se envía el formulario. En caso de que se retorne false, el formulario no será enviado. Lo que queramos controlar dentro del formulario queda a nuestra elección. En nuestro caso estamos controlando que el valor introducido en el campo comando sea igual a "enviar".

De esta forma la función "enviar()" quedará de la siguiente forma:

  1.  
  2. function enviar(){
  3. var formulario = document.getElementById("myform");
  4. var dato = formulario[0];
  5.  
  6. if (dato.value=="enviar"){
  7. alert("Enviando el formulario");
  8. formulario.submit();
  9. return true;
  10. } else {
  11. alert("No se envía el formulario");
  12. return false;
  13. }
  14. }
  15.  
Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre JavaScript
Foro sobre JavaScript
tags: , , ,

Artículos relacionados:

2 comentarios »

Redifusión RSS de los comentarios de la entrada. TrackBack URI

  1. kanita579
    Julio 26, 2009 #

    como crear un formulario asi como este que posteee de una vez en la misma web?

  2. krak
    Enero 24, 2010 #

    Como hacer que el botón enviar formulario haga que el formulario lo envié a una dirección x seleccionada por el autor de la web????

Deje un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*