Controlar el envío de un formulario con JavaScript

24/Abr/2009 JavaScript , , 15 Comentarios
Ejemplos Programación en Javascript

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.

<form id="myform" action="enviar.php">
  <label for="comando">Comando: </label>
  <input type="text" id="comando"/><br />
  <button>Enviar formulario</button>
</form>

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.

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

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:

function enviar() {
  var formulario = document.getElementById("myform");
  var dato = formulario[0];

  if (dato.value=="enviar") {
    alert("Enviando el formulario");
    formulario.submit();
    return true;
  } else {
    alert("No se envía el formulario");
    return false;
  }
}

 

Vídeos sobre JavaScript


15 comentarios en “Controlar el envío de un formulario con JavaScript”

Víctor Cuervo

Duda

if (dato.value==”enviar”){
alert(“Enviando el formulario”);
formulario.submit();
return true;

al enviar el retorno de “true”, el envio se ejecuta. al usar el metodo “formulario.submit();” se envia dos veces? o es necesario ejecutar el metodo submit(); y ademas retornar true?.

Víctor Cuervo

Monse

Como un alert al dar okay me puede mandar a un formulario

Víctor Cuervo

Víctor Cuervo

Puedes utilizar un confirm para un OK o Cancelar.

if (confirm("Confirma Opción")) {
  txt = "Elegiste OK!";
} else {
  txt = "Elegiste Cancel!";
}

Saludos.

Víctor Cuervo

Carmen Encinas

Buenos días.
Yo programo con XHTML, y he probado el ejemplo que has escrito (que no es el mismo que el del video, porque aquí entra en juego php) y funciona. Pero. si declaro el botón de la siguiente manera:
, ya no funciona, y no entiendo por qué, puesto que el debugger de Chrome no me da ningún error, pero tampoo se ejecuta nada. Te paso el código de los dos archivos: formulariio.html y enviar.php:

formulario.html
——————–

Formulario

Introduzca un Dato:

function enviar()
{
var formulario = document.getElementById(«myform»);
var dato = formulario[0];

if (dato.value==»enviar»)
{
alert(«Enviando el formulario»);
formulario.submit();
return true;
}
else
{
alert(«No se envía el formulario»);
return false;
}
}

enviar.php
————-

Servidor Apache

Por favor, ¿me podeis ayudar?.

Víctor Cuervo

Carmen Encinas

Perdón, no sé qué pasa que el código html no se a escrito en el comentario, así que por aqui no te puedo pasar el código

Víctor Cuervo

Duda

if (dato.value==»enviar»){
alert(«Enviando el formulario»);
formulario.submit();
return true;

al enviar el retorno de «true», el envio se ejecuta. al usar el metodo «formulario.submit();» se envia dos veces? o es necesario ejecutar el metodo submit(); y ademas retornar true?.

Víctor Cuervo

Daniel

Hola. Mediante un inputbox (HTML) introduzco un núnero : «123456» y quisiera que mediante un boton me abra la pagina : misitioweb/123456.
No se como asignarle esa variable (123456) al boton.
Gracias

Víctor Cuervo

rube

jlkjlfkjdlkfjdslkjflsdjfewjflksdlkjfdlksf jdlksjflkdsjfjlfkjdslkf

Víctor Cuervo

Jorge Augusto

Hola como puedo poner dos funciones dentro del submit ya que no me reconoce la ultima o que me falta?
onsubmit=»return validarcheck(); return validarradio()»

Víctor Cuervo

Víctor Cuervo

En el ejemplo http://lineadecodigo.com/javascript/controlar-el-envio-de-un-formulario-con-javascript/ te explicamos como hacerlo. Espero que te sea de ayuda.

Saludos.

Víctor Cuervo

Víctor Cuervo

@Mario, @Christian, Gracias por los comentarios. :-D

Víctor Cuervo

Christian

Muchas gracias, me ayudó bastanye amigo.

Víctor Cuervo

Mario

gracias

Víctor Cuervo

krak

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????

Víctor Cuervo

kanita579

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

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*