Compruebe si los valores del formulario web han cambiado

Question

Tengo un formulario de varios pasos y el usuario puede navegar a cualquier página para modificar o agregar información. Hay un menú que muestra el progreso actual, los pasos que el usuario ha completado y permite navegar hacia cualquier paso completado o pendiente.

A pesar de un gran botón "Guardar y continuar", algunos usuarios hacen clic en este menú para navegar más. Debo verificar si los valores han cambiado en un formulario y preguntar: "¿Guardar cambios? Sí/No".

¿Cuál es la mejor manera (con un código JavaScript mínimo para el lado del cliente) me sugieres que compruebe si los valores de formulario han cambiado?

editado un poco más tarde:

me olvidó decir que la forma de múltiples pasos utiliza devolución de datos entre los pasos.

Answer 1

El plugin de jQuery "Formulario sucio" puede ayudarle a cabo aquí:

http://plugins.jquery.com/project/dirtyform

Answer 2

El jQuery Form Wizard plugin debería ser útil en este caso.

See Demo Here

Answer 3

Esto no es del todo fácil y sin jQuery porque el evento onchange para las formas no es compatible constantemente a través de los navegadores.

Yo diría que si puedes, utiliza uno de los complementos jQuery presentados en las otras respuestas.

Si jQuery está descartado, considere agregar un onchange='if (this.value != this.defaultValue) dirty_flag = true;' simple a cada elemento de entrada. Si desea un enfoque limpio, hacer esto en una sección <script>:

document.getElementById("formid").onchange = 
function() { if (this.value ....) } 

Answer 4

Ya que menciona usted está enviando de vuelta entre los pasos, tendría un campo oculto que almacena lo que el siguiente paso es. Por defecto, este sería el siguiente paso del formulario. El botón "Guardar y continuar" solo envía el formulario.

Luego, cada entrada del menú establecería el valor de este formulario oculto en el paso apropiado y luego enviaría el formulario. Algo como:

<script type="text/javascript"> 
function goToStep(step) { 
document.getElementById("hiddenFieldID").value = step; 
document.getElementById("formID").submit(); 
} 
</script> 

<ul id="menu"> 
    <li><a href="javascript:goToStep(1);">Step 1</a></li> 
    <li><a href="javascript:goToStep(2);">Step 2</a></li> 
    etc... 
</ul> 

Answer 5

Intente comprobar los valores de formulario como este. La llamada de initFormChangeCheck() copia todos los valores en un objeto reflejado y establece los eventos mousedown y keydown en cada elemento de formulario a lo que se llama la rutina checkChange. También puede verificar por un intervalo.

var fList = new Object(); 
function initFormChangeCheck() { 
    for (var fOi = 0; fOi < document.forms[0].elements.length; fOi++) { 
    el = document.forms[0].elements[fOi]; 
    fList[el.name] = el.value; 
    el.onmousedown = checkChange; 
    el.onkeydown = checkChange; 
    } 
} 
function checkChange() { 
    var changed = false; 
    for (var fOi = 0; fOi < document.forms[0].elements.length; fOi++) { 
    el = document.forms[0].elements[fOi]; 
    if (fList[el.name] != el.value) { 
     changed = true; 
    } 
    } 
    document.forms[0].show_invoice.disabled = changed; 
} 

Peter Gotrendy News