martes, 28 de octubre de 2008

Como evitar el doble submit

Un problema tipico de la programación web es el doble submit, esto ocurre cuando un usuario luego de ingresar la información en un form hace varios clicks en el input submit. 

Una manera de evitar esto es mediante javascript, en nuestro caso que estamos utilizando rails lo podemos agregar en el application.js, pero se puede agregar en cualquier js que utilizemos en las paginas que estemos desarrollando.

Para agregar este ejemplo debemos agregar la libreria de prototype.js

var SubmitHelper = {
  disableFormsOfPage: function(){
  $$('form').each(function(form) {
      form.observe('submit', function() {
        form.getInputs('submit').each(function(submit) {
          if (!submit.readAttribute("no_disabled")){
            submit.value = "Trabajando...";
            submit.disable();
          }
        });
      });
    });
  },
  init: function(){
    Event.observe(window, 'load', SubmitHelper.disableFormsOfPage.bindAsEventListener())
  }
}

SubmitHelper.init();

Bien ahora vamos a explicar un poco lo que hace el codigo lo que hacemos es recorrer todos los forms que hay en la pagina y para cada uno de ellos observamos el submit, una vez que ocurre dicho evento lo que hacemos es obtener el input que realizo el submit y a este le preguntamos si tiene el atributo no_disabled(este atributo es agregado por nosotros y lo que indica es que a este boton no hay que desabilitarlo) en caso de que no exista se le setea el valor "Trabajando...", el valor puede ser cualquiera o dejar el que ya tiene y luego lo deshabilitamos.

Suponiendo que estamos adentro de un form

<input type="submit" value="Crear"> 

En este caso si agregamos el javascript  que escribimos mas arriba el boton se deshabilita al momento de hacer submit y escribe el texto "Trabajando..."

<input type="submit" value="Crear" no_disabled="true">

En este caso el boton no se deshabilita


No hay comentarios: