Подсвечивать кнопку при изменении полей формы (HTML, jQuery)

Итак, предположим, что у нас есть такая html-форма:

<form id="test" method="post" action="script.php">
<input class="savef" type="text" id="txt" value="данные"><br>
<select class="savef" id="sel">
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select><br>
<textarea class="savef" id="txar">еще
данные
</textarea><br>
<label><input class="savef" id="vbr" type="checkbox"/>выбрать</label><br>
<input type="hidden" id="id" value=""/>
<input id="knsv" type="submit" value="Обновить" />
</form>

Тем полям, за изменениями в которых необходимо следить, мы задаём class='savef' при этом у этих полей обязательно должен присутствовать атрибут id, например, для первого поля это id='txt'. Кнопке "Обновить", которой мы будем менять цвет фона задаём атрибут id='knsv'.

Типы полей в форме, естественно, могут быть разными это и input всех видов, и select, и textarea.

Следующий скрипт на jQuery занимается подсветкой кнопки "Обновить" при внесении изменений в поля формы и снимает подсветку, если данные в полях вернуть в исходное значение.

redact(); // вызов функции, чтобы запомнить исходные данные полей формы

function redact() {
 $(".hidred").remove();
 $('.savef').each(function(i){
  var type = this.type || this.tagName.toLowerCase();
  if (type == 'checkbox') {zn = +$(this).prop('checked');} else {zn = $(this).val();}
  nm = $(this).attr('id') + "_z";
  $("<input>", { id: nm, class: "hidred", type: "hidden", value: zn}).appendTo("body");
 });
 $('#knsv').css('background','buttonface');
}

// функция проверяет, изменение данных в полях формы и управляет подсветкой кнопки Обновить
$("body").on("change paste keyup", ".savef", function () {
 var flg = 0;
 $('.savef').each(function(i){
  var type = this.type || this.tagName.toLowerCase();
  if (type == 'checkbox') {zn = +$(this).prop('checked');} else {zn = $(this).val();}
  nm = $(this).attr('id') + "_z";
  zz = $('#' + nm).val();
  if (zz != zn) {flg = 1; return false;} else {flg = 0;}
 });
 if (flg == 0) {$('#knsv').css('background','buttonface');} else {$('#knsv').css('background','#ff8080');}
});

$('#knsv').click(function(){ // при нажатии на кнопку Обновить
  redact(); // вызов функции, чтобы запомнить новые исходные данные полей формы после сохранения
});

Теперь, предположим, что у нас на странице есть несколько групп полей, за изменениями в которых нужно следить и подсвечивать свою кнопку "Обновить" для каждой такой группы. Имеем в html, например, 4 группы полей:

<input class="savef1" type="text" id="txt1" value="данные">
<select class="savef1" id="sel">
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select>
<input id="upd1" type="submit" value="Обновить" />

<textarea class="savef2" id="txar">еще данные</textarea>
<label><input class="savef2" id="vbr" type="checkbox"/>выбрать</label><input id="upd2" type="submit" value="Обновить" />

<input class="savef3" type="text" id="txt2" value="данные">
<input class="savef3" type="text" id="txt3" value="данные">
<input id="upd3" type="submit" value="Обновить" />

<input class="savef4" type="text" id="txt4" value="данные">
<input class="savef4" type="text" id="txt5" value="данные">
<input id="upd4" type="submit" value="Обновить" />

Здесь полям из первой группы задаём class='savef1', для второй группы class='savef2', третьей - class='savef3', четвёртой - class='savef4'. Аналогично у всех полей обязательно должен присутствовать атрибут id.

Кнопке "Обновить" первой группы задаём атрибут id='upd1', второй группы - id='upd2', третьей - id='upd3', четвёртой - id='upd4'.

Следующий скрипт на jQuery занимается подсветкой кнопки "Обновить" для каждой группы полей в отдельности. И снимает подсветку, если данные в полях вернуть в исходное значение.

set_red('savef1', 'upd1'); // запомнить изначальные данные
$("body").on("change paste keyup", ".savef1", function () {chk_red('savef1', 'upd1');}); // подсветить кнопку при изменениях

set_red('savef2', 'upd2'); // запомнить изначальные данные
$("body").on("change paste keyup", ".savef2", function () {chk_red('savef2', 'upd2');}); // подсветить кнопку при изменениях

set_red('savef3', 'upd3'); // запомнить изначальные данные
$("body").on("change paste keyup", ".savef3", function () {chk_red('savef3', 'upd3');}); // подсветить кнопку при изменениях

set_red('savef4', 'upd4'); // запомнить изначальные данные
$("body").on("change paste keyup", ".savef4", function () {chk_red('savef4', 'upd4');}); // подсветить кнопку при изменениях

function chk_red(cls, btn) {
 var flg = 0;
 $('.' + cls).each(function(i){
  var type = this.type || this.tagName.toLowerCase();
  if (type == 'checkbox') {zn = +$(this).prop('checked');} else {zn = $(this).val();}
  nm = $(this).attr('id') + "_z";
  zz = $('#' + nm).val();
  if (zz != zn) {flg = 1; return false;} else {flg = 0;}
 });
 if (flg == 0) {$('#' + btn).css('background','buttonface');} else {$('#' + btn).css('background','#ff8080');}
}

function set_red(cls, btn) {
 $("." + btn + 'cl').remove();
 $('.' + cls).each(function(i){
  var type = this.type || this.tagName.toLowerCase();
  if (type == 'checkbox') {zn = +$(this).prop('checked');} else {zn = $(this).val();}
  nm = $(this).attr('id') + "_z";
  $("<input>", { id: nm, class: btn + "cl", type: "hidden", value: zn}).appendTo("body");
 });
 $('#' + btn).css('background','buttonface');
}

Теперь предположим, что у нас есть только одна группа полей и мы не хотим задавать каждому полю значение id, но хотим следить за изменениями в полях помеченными одним классом и подсвечивать свою кнопку "Обновить", если в них что-то изменилось.

Тем полям, за изменениями в которых необходимо следить, мы задаём class='savef'. Кнопке "Обновить", которой мы будем менять цвет фона задаём атрибут id='knsv'.

set_red('savef', 'knsv'); // запомнить изначальные данные
$("body").on("change paste keyup", ".savef", function () {chk_red('savef', 'knsv');}); // подсветить кнопку при изменениях

function chk_red(cls, btn) {
 var flg = 0;
 $('.' + cls).each(function(i){
  var type = this.type || this.tagName.toLowerCase();
  if (type == 'checkbox') {zn = +$(this).prop('checked');} else {zn = $(this).val();}
  nm = "_zz" + i;
  zz = $('#' + nm).val();
  if (zz != zn) {flg = 1; return false;} else {flg = 0;}
 });
 if (flg == 0) {$('#' + btn).css('background','buttonface');} else {$('#' + btn).css('background','#ff8080');}
}

function set_red(cls, btn) {
 $("." + btn + 'cl').remove();
 $('.' + cls).each(function(i){
  var type = this.type || this.tagName.toLowerCase();
  if (type == 'checkbox') {zn = +$(this).prop('checked');} else {zn = $(this).val();}
  nm = "_zz" + i;
  $("<input>", { id: nm, class: btn + "cl", type: "hidden", value: zn}).appendTo("body");
 });
 $('#' + btn).css('background','buttonface');
}