EN FR ES
Web-page design en Guadalajara.
Javascript: comprobar si ha cambiado un dato de cualquier formulario de la página

Javascript: comprobar si ha cambiado un dato de cualquier formulario de la página

22/Ene/2018

En múltiples ocasiones, los usuarios de nuestras aplicaciones web, por equivocación o despiste, intentan abandonar una página habiendo completado o modificado alguno de los formularios que ésta pueda contener. En este artículo explico cómo, utilizando los datos de usuario y llamando a una simple función estándar al cargar la página y a otra al intentar abandonarla, podemos avisar al usuario para que no cometa este error.

Para ello almacenaremos en un dato de usuario en cada elemento del formulario, el valor inicial que éste tiene o si está activado o no en caso de las casillas de verificación o los radiobutton. En el momento de abandonar la página, compararemos el valor del dato de usuario con el valor actual, y en caso de que sea distinto, avisaremos al usuario de que los datos del formuario han cambiado, y de que la acción que va a realizar supondría su pérdida. Para ello usaremos el evento onbeforeunload del objeto window.

Por otro lado, deberemos utilizar una variable global que indicará si tenemos que hacer la validación o no, ya que esta comprobación no habrá que realizarla si se abandona la página porque estamos enviando uno de sus formularios. Al cargar la página, esta variable, la inicializamos a true, para que se realice la comprobación, pero en la función de validación del mismo, tras validar los datos introducidos, la cambiaremos a false, para que no se ejecute.

A continuación, os dejo el código que deberéis insertar en vuestra página web para que ésta realice la comprobación de manera automática.

También he programado un pequeño ejemplo para comprobar su funcionamiento; está comentado para su fácil compresión. Acceder a la página de ejemplo.

Éste es el javascript que debéis insertar en la página:

var comprobardatos=true;
window.onload = function() {almacenaValoresIniciales();};
window.onbeforeunload = function() {return compruebaCambiosEnCampos();};

function almacenaValoresIniciales() {
    var y;
    //cargo todos los formularios que haya en la página en un array
    var formularios=document.getElementsByTagName("form");
   //recorro todos los campos de todos los formularios y almaceno en dato de usuario valorinicial el     valor inicial del campo
   for (var x=0; x<formularios.length;x++) {
        for (var i=0;i<formularios[x].elements.length;i++){
            if (formularios[x].elements[i].type==="checkbox" || formularios[x].elements[i].type==="radio") {
                //cargo si esta activado o no la casilla de verificación o radio
                formularios[x].elements[i].dataset.valorinicial=formularios[x].elements[i].checked+"";
            } else {
                formularios[x].elements[i].dataset.valorinicial=formularios[x].elements[i].value;
           }
       }
   }
}


function compruebaCambiosEnCampos() {
    //cargo todos los formularios que haya en la página en un array
    var formularios=document.getElementsByTagName("form");
    //recorro todos los campos de todos los formularios y comparo el dato de usuario valorinicial con el valor que actualmente contiene el campo, si ha cambiado activo el mensaje de aviso de abandono de la página.
    for (var x=0; x<formularios.length;x++) {
        for (i=0;i<formularios[x].elements.length;i++) {
            if (formularios[x].elements[i].type==="checkbox" || formularios[x].elements[i].type==="radio") {;
                // compruebo si ha cambiado si es una casilla de verificación o radio
                if ( formularios[x].elements[i].checked+""!==formularios[x].elements[i].dataset.valorinicial) {
                    return "Se realizaron cambios"
                }
            } else {
               // compruebo si han cambiado el resto de campos
               if ( formularios[x].elements[i].value!==formularios[x].elements[i].dataset.valorinicial) {
                   return "Se realizaron cambios"
               }
           }
       }
    }
}

function validaformularios(x) {
    //realizar validaciones por ejemplo que el campo textfield no esté vacio
    if (x.textfield.value==="") {
        alert("Por favor, introduzca el campo de texto 1");
        x.textfield.focus();
       return false;
    }
    // realizamos el resto de validaciones que requiramos
    comprobardatos=false;
    return true;

}

Espero que os sea de utilidad. 

Share it:   Facebook   Twitter

Previous   Return   Next

 

 

Cerrar

 

 

Aceptar      Cancelar