Как отследить изменения в form?

Question

[rinaz22]

Всем привет! Есть form с input и textarea заранее заполненными данными.
Вопрос: Как отследить изменения в этих полях? Например: если пользователь добавил 1 букву, то должен появиться текст "Не сохранено". А если он удалит эту букву, то этот текст снова должен исчезнуть.

Answer 1

[Buksirchik]

Используйте событие input

Comments

[rinaz22]

В форме же сразу несколько полей. Мне нужно отследить все, даже если поменяется один. Например: если в 1 поле поменяли текст и потом в 2-ом поменяли и вернули как было, то текст "Не сохранено" не должен исчезнуть, т.к. в 1-ом поле все еще есть изменения

[hzzzzl]

rinaz22, при загрузке формы в объекте сохранять "начальные значения" типа

defaultValues = {
  input_name: 'rinaz22',
  textarea_about: 'about meeee'
}

и потом в обработчике события смотреть, который инпут меняется, и сравнивать каждый раз с этим defaultValues... как-то так

[rinaz22]

hzzzzl, я так и делаю, но он проверяет только то поле, с которым я работаю. А чтобы проверить каждое поле с объектом, надо применить цикл, а это не желательно, т.к. в значений могут быть очень много

[Buksirchik]

rinaz22, используйте делегирование. Грубо говоря вешайте один обработчик события input на форму. И потом по event.target отслеживайте изменения.

[rinaz22]

Buksirchik, извините, не совсем понял

Answer 2

[hzzzzl]

к моему комменту выше

rinaz22, при загрузке формы в объекте сохранять "начальные значения" типа

defaultValues = {
  input_name: 'rinaz22',
  textarea_about: 'about meeee'
}

и потом в обработчике события смотреть, который инпут меняется, и сравнивать каждый раз с этим defaultValues... как-то так

https://codepen.io/anon/pen/ymOXqE

---
версия "без цикла", но я бы все же проверял все поля формы, но это уже надо поиграть потестировать
https://codepen.io/anon/pen/oKxebL?editors=1010

Comments

[rinaz22]

Ваш код работает, но я не могу "подружить" со своим кодом:

function arr_val() {
	var $value = {};
	$('form').find('input, textarea').each(function() {
		$value[this.id] = $(this).val();
	});

	$("form").on("input",function(e){
		if ($value[e.target.id] != $("#"+e.target.id).val()) {
			console.log("Есть");
		} else {
			console.log("Нет");
		}
	});
}
arr_val();

[hzzzzl]

rinaz22, ну если с айдишниками и jquery, то как-то так должно сработать

const values = {
  name: 'default',
  year: '1999'
}

$("form").on("input",function(e){
    if (values[e.target.id] != e.target.value) {
      console.log("Есть");
    } else {
      console.log("Нет");
    }
});

https://codepen.io/anon/pen/ymOooW?editors=1010

[rinaz22]

hzzzzl, проблема у меня возникла, когда я создал объект с помощью each(function() {...

Answer 3

[Август Милович]

Примерно

let input = document.querySelector(".input");
let defaultText = input.value;

let notSavedAlert = document.querySelector(".notSavedAlert");
let saveButton = document.querySelector(".saveButton");

//нажата кнопка
input.addEventListener("keyup", checkInputText);
saveButton.addEventListener("click", saveInputText);

function checkInputText(e){
   if(input.value != defaultText){
     //функция которая выводит "не сохранено"
    notSavedAlert.style.display = "block";
    
    //выход из функции, чтобы действия ниже не выполнялись
    return false;
  }

  notSavedAlert.style.display = "none";
}

//сохранение нового текста по нажатию кнопки
function saveInputText(){
 defaultText = input.value;
}

Короче при нажатии кнопки, если текст совпадает с первоначальным текстом, то надпись скрывается, если не совпадает, показывается. По нажатию на кнопку сохранения первоначальным текстом становится текст в инпуте на данный момент. И так же делаешь с textareaa

Answer 4

[fallus]

Вот:

document.querySelectorAll('input').forEach(function(elm){
	elm.setAttribute('data-default-text', elm.value);
	elm.addEventListener('input', function(e){
		if(e.target.value != e.target.getAttribute('data-default-text')){
			console.log('Не совпадает!');
		}
	}, false);
})