Entradas con la etiqueta ‘preveneir evento por defecto’

detener el envio de un formulario con javascript

Lunes, 2 de Marzo de 2009

Para poder evitar o detener el envío de un formulario desde javascript será tan facil como en el evento onsubmit igualarlo a return false.

PLAIN TEXT
HTML:
  1. <form actio="http://tupagina.com/fichero.php" onsubmit="return false;">
  2. ...
  3.  </form>

de este modo no serviria de mucho puesto que nunca se enviaría el formulario, podemos simplemente enviarlo a una funcion:

PLAIN TEXT
HTML:
  1. <form actio="http://tupagina.com/fichero.php" onsubmit="return funcion();">
  2. ...
  3.  </form>
  5. function funcion(){
  6. if(...) return true;
  7. return false;
  8. }
  9. </script>

de este modo en la funcion podremos validad para metros, y hacer que se para el envio del formulario o enviarlo si todo es correcto.

Ahora bien, que pasa cuando queremos separar la declaración de los eventos del código html?

pues bien, si usamos los metodos addlistener o attachEvent para ie, al intentar devolver false, paa evitar que se envie nos damos cuenta que no funciona.

Asi:

PLAIN TEXT
JAVASCRIPT:
  1. AnadirEvento("submit",function(event)
  2. {
  3.          event.preventDefault(); // para FF standard
  4.          event.returnValue=false; // Para IE
  5.          funcionCualquiera();
  6.          return false; No tiene efecto sobre los evento
  7. }
  8. ,formulario);
  9.  
  10. //funcion generica para añadir eventos cross browser
  11. function AnadirEvento(evento, funcion, elemento) {
  12.    
  13.     if (elemento.addEventListener)  // standard W3C DOM
  14.         return elemento.addEventListener(evento,funcion,false);
  15.     else if (elemento.attachEvent) { // IE revelde DOM
  16.          return elemento.attachEvent("on"+evento, funcion);
  17.     }else{ // resto navegadores
  18.         try{
  19.         elemento["on"+evento] = funcion;
  20.         }
  21.         catch(e){throw 'No es posible añadir evento';}
  22.      }
  23.     
  24. }

Pues cuando añadimos un evento y declaramos una funcion anonima para efectuar diversas acciones, no tiene efecto usar el return false. Asi deberemos o indicar de alguna menera que queremos detener el evento por defecto para que no se envie el formulario o no se siga un enlace.

Así para ello tenemos dos funciones de javascript.

event.preventDefault() -> que sirve para prevenir que se ejeute la funcion por defecto del evento en cuestion. Si es un formulario evitará que se envie el formulario a la url del action. Si es un enlace se evitara o se prevendrá de que se vaya la pagina a la url del href.

event.returnValue= false -> Se puede igualar a true o a false, es exclusivo de Internet Explorer. Ahora con este podemos desactivar o hacer desactivar la funcion del evento.

Habrá que controlar cuando usar uno u otro, para evitar porblemas. en este ejemplo no se hace, se llama a los dos seguidamente.

un par de enlaces ineresantes: funcion prevent generica
ejemplo para desactivar un enlace:

Etiquetas:, , , , , , , ,
Publicado en Java Script | 3 comentarios »