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

При разработке web-приложений передо мной периодически встаёт задача узнать, изменились ли данные в полях html-формы с момента их последнего сохранения или нет.
Так как этими web-приложениями я пользуюсь сам, то часто бывает, вносишь что-то в поля, а потом пошёл пуэрчику попить, вернулся и не помнишь, то ли есть изменения в полях ввода, то ли нет.
Если бы кнопка "Обновить" меняла свой цвет при внесении изменений в заданные поля формы, напоминая, что данные нужно сохранить - было бы чудесно.
Итак, предположим, что у нас есть такая 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');
}
Поделиться статьей: