Logo JavaScript

Comprobar si hay cambios en un formulario (JavaScript)

En JavaScript, Programación por trellat0 Comentarios

Cuando se trabaja con formularios en un entorno web, hay que tener en cuenta los eventos que puede llevar a cabo el usuario y que pueden hacer que pierda la información ya introducida de forma involuntaria. Por ejemplo, si está rellenando un formulario o modificando los datos de uno ya rellenado anteriormente, y el usuario entonces intenta salir de la página, cerrándola o dándole al botón atrás por ejemplo, puede haber el riesgo de que aún queriendo hacerlo, el usuario no haya pulsado sobre el botón o enlace destinado a guardar esos cambios. Por esta razón, suele ser útil comprobar si hay cambios en un formulario antes de abandonar la página del mismo. Esto se puede comprobar de manera sencilla mediante JavaScript, en concreto con JQuery.

Lo primero, sería definir una variable a modo de flag, para saber si el formulario ha sido modificado. Esta variable, podría ser la siguiente.

var modified;

A continuación, se define una función con ayuda de JQuery, para que cuando la página se haya terminado de cargar (ready), en el caso de que en cualquier elemento de tipo input (campos) o select (desplegables) haya habido algún cambio (change); el valor de la variable que se ha definido antes sea true, lo cual querrá decir que hay cambios en un formulario de la página actual.

$(document).ready(function () 
{  
	$("input, select").change(function () {   
		modified = true;  
	}); 
}); 

Lo siguiente sería controlar mediante una función, que si la variable modified es true, muestre un mensaje advirtiendo al usuario que hay cambios sin guardar. Así el usuario puede decidir si salir o no, pero ya no perderá sus cambios de manera involuntaria. Esta función podría tener la siguiente forma.

function validarCampos() {
  if (modified)  
	return confirm('Puede haber cambios sin guardar en el formulario, ¿Desea salir de todas formas?'); 
}

Con esta función, si ha habido cambios en el formulario, mostrará una alerta preguntando si se desea salir y perder los cambios y devuelve si el usuario ha aceptado o ha cancelado, por lo que es una función ideal para llamarla, por ejemplo, en el evento onbeforeunload, el cual es llamado cuando se sale de la página.

Deja un comentario