Cómo deshabilitar el botón de enviar en jQuery si los campos de formulario no han sido modificados?

Question

Tengo un formulario HTML que contiene los campos de texto, casillas de verificación, botones de opción y el botón de enviar.

Me gustaría que presentar botón se activa únicamente si el contenido de los campos se modifican.Ahora aquí está la trampa: si el usuario modifica el contenido del campo de volver a los valores originales, el botón del formulario debe ser desactivado de nuevo.

1. Original valor del campo "foo" => botón de enviar está deshabilitado
2. Usuario cambia el valor del campo "bar" => enviar botón se activa
3. Usuario cambia el valor del campo de regreso a "foo" => botón de enviar se convierte en discapacitado de nuevo

Cómo lograr esto con jQuery?¿Hay algún tipo de solución general o secuencia de comandos que se podría utilizar con cualquier forma?

Editar:Lo que yo estoy pidiendo no se puede hacer con simples sucio de seguimiento de estado.

Answer 1

Utilice el seguimiento del estado sucio. Adjuntar un valor booleano (por ejemplo IsDirty) para cada control de entrada y de palanca siempre que los cambios de valor. Si bien la presentación del cheque formulario si el atleast uno o más valores han cambiado y luego enviar el formulario. De lo contrario, muestra una alerta al usuario.

Otra solución es llamar a una función común cuando un valor controles cambios. En esta función se puede establecer una variable global (IsDirty) a cierto si algo cambió y también activar / desactivar el botón de envío.

var isDirty = false;

function SomethingChanged(){
     if( !isDirty ) isDirty = true;
     btnSubmit.disabled = !isDirty;
}

Función de control genérico para cualquier

Los supuestos: Añadir el valor inicial de cada control a un atributo "InitVal"

function SomethingChanged(control){
     if( control.value != control.InitVal )
          control.IsDirty = true;
     else
          control.IsDirty = false;
}

En la función anterior para que sea genérica que puede tener funciones separadas para cada tipo de control como TextBoxChanged y DropDownChanged etc, pero tiene los dos atributos siguientes en cada control

1. InitValue - Valor inicial del control
2. IsDirty - Valor booleano que indica que el valor del control ha cambiado

Answer 2

A sólo dos pasos:

1. almacenar un hash de todos los valores iniciales en una variable javascript
2. onchange de cada entrada que vuelve a calcular hash y verifica con la almacenada. si es la misma, deshabilitar el botón de enviar, si no lo es, activarlo.

Answer 3

Tener un vistazo a la plug-in de validación .

Answer 4

Esto parece una respuesta mejor.

1401 -Utilizar-jQuery-To-apalancamiento-The-OnChange-Método-Of-Inputs.htm

Answer 5

No he probado a continuación cuál es :-) Pero es que lo que quiere decir?

$(document).ready(function() {
    $("#myform :input").attr("init",$(this).val()).bind("change.dirty", function(evt) {
        if ($(this).val()!=$(this).attr("init")) $(this).addClass("dirty");
        else $(this).removeClass("dirty");
        $('#thebutton').attr("disabled",!$("#myform .dirty").size());
    });
});

* - lucio

Answer 6

Debería ser posible para salvar toda la forma de objeto (ya sea tal como es, o iterando con each () y almacenar los datos en un mapa), y luego hacer lo mismo onSubmit y compara ambos valores.

Answer 7

Puede utilizar dirtyField plugin de lugar y establecer denoteDirtyForm: cierto. Ahora bien, si el formulario tiene "dirtyForm" clase significa que tiene cambios sin guardar.

Answer 8

Lo que podría hacer es configurar un script de jQuery para escanear la página en la carga de la página y compruebe si hay una forma, un inventario de los campos y sus valores, y después comprobar contra esa matriz de referencia de entrada cada vez que se actualiza una entrada.