Estoy buscando una manera de enviar solo campos de formulario modificados al servidor. Entonces, digamos que tengo un formulario
<form> <input type="text" name="a"/> <select name="b">...</select> <input type="checkbox" name="c"/> </form>que ya está poblado con ciertos datos. El usuario edita el formulario y hace clic en enviar. Si el usuario solo cambió la entrada b, entonces quiero enviar solo la entrada b. Si solo se cambiaron a y c, quiero enviar solo a y c. Y así.
Podría escribir algo yo mismo para lograr esto, pero me pregunto si tal vez ya hay algo que podría usar. Idealmente, me gustaría que el código fuera corto. Algo así sería perfecto:
$('form').serialize('select-only-changed');Además, encontré este http://code.google.com/p/jquery-form-observe/ , pero veo que hay problemas con él. ¿Este complemento funciona sólidamente?
Otro enfoque sería serialize el formulario cuando se carga la página y, luego, enviar solo los cambios.
$(function() { var $form = $('form'); var startItems = convertSerializedArrayToHash($form.serializeArray()); $('form').submit() { var currentItems = convertSerializedArrayToHash($form.serializeArray()); var itemsToSubmit = hashDiff( startItems, currentItems); $.post($form.attr('action'), itemsToSubmit, etc. } }); Luego, todo lo que tiene que escribir es la función hashDiff , que es sencilla y generalmente útil.
Esto es bueno porque se puede empaquetar fácilmente en un complemento y puede funcionar repetidamente en el mismo formulario si está usando Ajax.
function hashDiff(h1, h2) { var d = {}; for (k in h2) { if (h1[k] !== h2[k]) d[k] = h2[k]; } return d; } function convertSerializedArrayToHash(a) { var r = {}; for (var i = 0;i<a.length;i++) { r[a[i].name] = a[i].value; } return r; }Aquí hay una prueba mínima:
describe('hashDiff()', function() { it('should return {} for empty hash',function() { expect(hashDiff({},{})).toEqual({}); }); it('should return {} for equivalent hashes',function() { expect(hashDiff({a:1,b:2,c:3},{a:1,b:2,c:3})).toEqual({}); }); it('should return {} for empty hash',function() { expect(hashDiff({a:1,b:2,c:3},{a:1,b:3,c:3})).toEqual({b:3}); }); });Otra opción sería marcar los campos como disabled antes de enviarlos. De forma predeterminada, los campos disabled no se serializarán ni se enviarán con una publicación de formulario predeterminada.
Ejemplo sencillo:
function MarkAsChanged(){ $(this).addClass("changed"); } $(":input").blur(MarkAsChanged).change(MarkAsChanged); $("input[type=button]").click(function(){ $(":input:not(.changed)").attr("disabled", "disabled"); $("h1").text($("#test").serialize()); });en jsfiddle .
Puede agregar un parámetro 'valor anterior' al campo de entrada. Complete este valor en el momento en que se genera la página, ya sea con JavaScript o en el lado del servidor.
<input name="field1" value="10" oldvalue="10">Luego use la siguiente función para serializar:
function serializeForm() { data = ""; $("input,textarea").each(function (index, obj) { if ($(obj).val() != $(obj).attr("oldvalue")) { data += "&" + $(obj).serialize(); } }); return data.substr(1); }Después de que los datos se hayan enviado al servidor, su secuencia de comandos podría actualizar los parámetros 'oldvalue' para evitar que los datos se envíen nuevamente a menos que se realicen cambios adicionales.