Uso de jquery para monitorear cambios en el formulario

Question

Intentando aprender algo de jquery para implementar una función de autoguardado y necesito ayuda. Tengo un código para supervisar el estado de los campos de formulario para ver si ha habido algún cambio. Todo funciona, pero solo necesito monitorear los cambios en una forma específica, no todas las entradas de formularios en la página. Hay un cuadro de búsqueda y un formulario de boletín en la misma página y cuando se cambian estos campos de formulario, también se detectan, lo que necesito filtrar de alguna manera o mejor aún, solo apuntar al formulario específico.

$(function(){ 
    setInterval("CheckDirty()",10000); 
    $(':input').each(function() { 
     $(this).data('formValues', $(this).val()); 
    }); 
}); 

function CheckDirty() 
{ 
    var isDirty = false; 

    $(':input').each(function() { 
     if($(this).data('formValues') != $(this).val()) { 
      isDirty = true; 
     } 
    }); 

    if(isDirty == true){ 
     alert("isDirty=" + isDirty); 
    } 
} 

Answer 1

Sólo tiene que añadir una clase a la forma y lo utilizan para filtrar

$('.form :input').each(function() { 
    $(this).data('formValues', $(this).val()); 
}); 

EDIT

Sólo una sugerencia, se puede conectar el evento de cambio directamente a la forma

demostración en vivo aquí: http://jsfiddle.net/jomanlk/kNx8p/1/

<form> 
    <p><input type='text'></p> 
    <p><input type='text'></p> 
    <p><input type='checkbox'></p> 
</form> 

<p><input type='text'></p> 

<div id='log'></div> 

$('form :input').change(function(){ 
    $('#log').prepend('<p>Form changed</p>') 
}); 

Puede mejorar esto mediante la adición de un temporizador y lo que es guardar cada xx segundos .

Answer 2

¿cuál es el ID de su formulario?

sólo tiene que hacer su selector más específico :)

en lugar de $(':input').each(function() {

uso

$('#yourFormId').find(':input').each(function() { 

Answer 3

Creo que puede usar una clase para seleccionar el tipo de entrada que desea.

<input class="savethis" ... /> 

Luego, en jQuery, utilice esto.

$(':input .savethis').each(function() { ... 

Answer 4

Se puede especificar un atributo id (por ejemplo theForm) a su elemento de formulario y luego seleccionar sólo a los campos de entrada en su interior.

luego intenta seleccionar con

$(':input', '#theForm') 

Answer 5

Puede utilizar la función .change() y luego usar $(this) para indicar que desea trabajar sólo con el campo que está siendo activamente cambió.

$('#myForm input[type="text"]').change(function() { 

    $(this)... 

}); 

Editar: #myForm es su forma de identificación para que pueda orientar de una forma específica. Incluso puede especificar campos simplemente type = "text" dentro de ese formulario, como en mi ejemplo.

Answer 6

Aquí se puede ver su funcionamiento: http://jsfiddle.net/paska/zNE2C/

$(function(){ 
    setInterval(function() { 
     $("#myForm").checkDirty(); 
    },10000); 
    $("#myForm :input").each(function() { 
     $(this).data('formValues', $(this).val()); 
    }); 

    $.fn.checkDirty = function() { 
     var isDirty = false; 

     $(this).find(':input').each(function() { 
      if($(this).data('formValues') != $(this).val()) { 
       isDirty = true; 
      } 
     }); 

     if(isDirty == true){ 
      alert("isDirty=" + isDirty); 
     } 
    }; 
}); 

Answer 7

var $jq= jQuery.noConflict(); 
     $jq(function() {      $jq('#extensibleForm').data('serialize',$jq('#extensibleForm').serialize()); 
}); 


function formHasChanged(){ 
     if($jq('#extensibleForm').serialize()!=$jq('#extensibleForm').data('serialize')){ 
       alert("Data Changed...."); 
       return (false); 
} 
return true; 
}