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

29 августа 2019 Андрей Курпас Главная › IT › Интернет технологии ›

При разработке 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(); // вызов функции, чтобы запомнить новые исходные данные полей формы после сохранения
});

Поделиться статьей: