@rinaz22

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

Всем привет! Есть form с input и textarea заранее заполненными данными.
Вопрос: Как отследить изменения в этих полях? Например: если пользователь добавил 1 букву, то должен появиться текст "Не сохранено". А если он удалит эту букву, то этот текст снова должен исчезнуть.
  • Вопрос задан
  • 85 просмотров
Пригласить эксперта
Ответы на вопрос 4
@Buksirchik
Используйте событие input
Ответ написан
hzzzzl
@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
Ответ написан
CodeInMyHeart
@CodeInMyHeart
SOS
Примерно
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
Ответ написан
@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);
})
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
от 110 000 до 150 000 руб.
Александрия Москва
от 200 000 до 250 000 руб.
Алгоритмика Москва
от 120 000 до 200 000 руб.
24 авг. 2019, в 11:31
30000 руб./за проект
24 авг. 2019, в 10:59
750 руб./за проект
24 авг. 2019, в 10:41
4000 руб./за проект