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

При разработке web-приложений передо мной периодически встаёт задача узнать, изменились ли данные в полях html-формы с момента их последнего сохранения или нет.
Так как этими web-приложениями я пользуюсь сам, то часто бывает, вносишь что-то в поля, а потом пошёл пуэрчику попить, вернулся и не помнишь, то ли есть изменения в полях ввода, то ли нет.
Если бы кнопка "Обновить" меняла свой цвет при внесении изменений в заданные поля формы, напоминая, что данные нужно сохранить - было бы чудесно.
Итак, предположим, что у нас есть такая html-форма:
<form name="test" method="post" action="script.php">
<input class="savef" type="text" name="txt" value="данные"><br>
<select class="savef" name="sel">
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select><br>
<textarea class="savef" name="txar">еще
данные
</textarea><br>
<label><input class="savef" name="vbr" type="checkbox"/>выбрать</label><br>
<input type="hidden" name="id" value=""/>
<input id="knsv" type="submit" value="Обновить" />
</form>
Тем полям, за изменениями в которых необходимо следить, мы задаём class='savef' при этом у этих полей обязательно должен присутствовать атрибут name, например, для первого поля это name='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('name') + "_z";
$("<input>", { id: nm, class: "hidred", type: "hidden", value: zn}).appendTo("body");
});
$('#knsv').css('background','buttonface');
}
// функция проверяет, изменение данных в полях формы и управляет подсветкой кнопки Обновить
$('.savef').on('change paste keyup', 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('name') + "_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(); // вызов функции, чтобы запомнить новые исходные данные полей формы после сохранения
});
Поделиться статьей: