type - jquery disable autocomplete chrome

¿Cómo deshabilitar el botón de enviar en jQuery si los campos de formulario no se han modificado?

Question

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

Me gustaría que el botón de enviar esté habilitado solo si el contenido de los campos está modificado. Ahora aquí está el truco: si el usuario modifica el contenido del campo a sus valores originales, el botón de forma debería deshabilitarse nuevamente.

1. El valor de campo original "foo" => botón de enviar está deshabilitado
2. El usuario cambia el valor del campo a "bar" => botón de enviar se activa
3. El usuario cambia el valor del campo de nuevo a "foo" => botón de enviar se vuelve a deshabilitar

¿Cómo lograr esto con jQuery ? ¿Hay algún tipo de solución general o script que pueda usar con cualquier forma?

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

Answer 1

Eche un vistazo al complemento de validación .

Answer 2

Solo dos pasos:

1. almacenar un hash de todos los valores iniciales en una variable de javascript
2. El cambio de cada entrada recalcula ese hash y lo verifica con el almacenado. si es lo mismo, deshabilite el botón de enviar, si no es así, habilítelo.

Answer 3

Utilice el seguimiento de estado sucio. Adjunte un valor booleano (por ejemplo, IsDirty) a cada control de entrada y alternar cada vez que cambie el valor. Al enviar el formulario, verifique si al menos uno o más valores han cambiado y luego envíe el formulario. De lo contrario, muestre una alerta al usuario.

Otra solución es llamar a una función común cada vez que cambia un valor de control. En esta función puede establecer una variable global (IsDirty) en verdadero si algo cambió y también habilitar / deshabilitar el botón de enviar.

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

Función genérica para cualquier control

Suposiciones: agregue 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érico, puede tener funciones separadas para cada tipo de control, como TextBoxChanged y DropDownChanged, etc. Pero tienen los siguientes dos atributos en cada control

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

Answer 4

Esto parece una mejor respuesta.

1401-Using-jQuery-To-Leverage-The-OnChange-Method-Of-Inputs.htm

Answer 5

No he probado lo que está debajo :-) ¿Pero es eso lo que quieres 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 guardar todo el objeto de formulario (ya sea como sea, o iterando con .each () y almacenando los datos en un mapa), y luego haga lo mismo en Enviar y compare ambos valores.

Answer 7

Puede usar el plugin dirtyField en su lugar y establecer denoteDirtyForm: true. Ahora, si su formulario tiene la clase "dirtyForm" significa que tiene cambios no guardados.

Answer 8

Lo que podría hacer es configurar un guión jquery para escanear la página al cargar la página y buscar un formulario, inventariar los campos y sus valores, y luego verificar con esa matriz de referencia de entrada cada vez que se actualice una entrada.