Отслеживание изменений полей формы через событие change в попапе

@illusionX · Регистрация: 07.06.2009

Студворк — интернет-сервис помощи студентам

Всем добрый вечер! У меня есть сайт со всплывающими формами.

У него есть формы, которые открываются во всплывающем окне. Я хочу отслеживать изменения полей формы с помощью события change. Но это всплывающая форма, и как я понимаю мне сначала нужно отслеживать изменение DOM-дерева (что этот элемент появился после открытия). Как это можно сделать с помощью JavaScript или jQuery?

Спасибо

@kidASM · 28.08.2020, 21:42

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style></style>
    </head>
    <body>
        <form name="form1">
            <input type="text" name="inp11">
            <input type="text" name="inp12">
            <input type="text" name="inp13">
        </form>
        <form name="form2">
            <input type="text" name="inp21">
            <input type="text" name="inp22">
            <input type="text" name="inp23">
        </form>
        <form name="form3">
            <input type="text" name="inp31">
            <input type="text" name="inp32">
            <input type="text" name="inp33">
        </form>
        <script>
            window.addEventListener("load", function(){
                var forms = document.forms;
                for(var i=0; i<forms.length; i++){
                    forms[i].addEventListener('change', function(event){
                        console.log("Событие onChange в форме: \"" + event.target.parentNode.name + "\", поле \"" + event.target.name + "\"");
                    });
                }
            });
        </script>
    </body>
</html>

@Mr_Sergo · 28.08.2020, 23:01

проще можно https://codepen.io/Mr_Sergo/pe... itors=1011

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form name="form1">
  <input type="text" name="inp11">
  <input type="text" name="inp12">
  <input type="text" name="inp13">
</form>
<form name="form2">
  <input type="text" name="inp21">
  <input type="text" name="inp22">
  <input type="text" name="inp23">
</form>
<form name="form3">
  <input type="text" name="inp31">
  <input type="text" name="inp32">
  <input type="text" name="inp33">
</form>

JavaScript
1
2
3
document.addEventListener('input', e => {  // тут поэкспериментируйте `input` или `change`- они немного по-разному себя ведут
  console.log(`Форма: ${e.target.parentNode.name}, инпут: ${e.target.name}`)
})

Добавлено через 12 минут
хотя, судя по html на вашем сайте, вам наверное больше подойдет что-то типа такого

JavaScript
1
2
3
document.addEventListener('input', e => {
  console.log(`Форма: ${e.target.closest('form').id}, инпут: ${e.target.name}`)
})

ну `input` или `change` попробуйте что удобней будет

Добавлено через 7 минут

Сообщение от illusionX

как я понимаю мне сначала нужно отслеживать изменение

ничего там отслеживать не нужно, просто ставите прослушку на события по одному из предложенных нами вариантов и делаете в обработчике что вам нужно

@illusionX · 29.08.2020, 14:40 **[ТС]**

ничего там отслеживать не нужно, просто ставите прослушку на события по одному из предложенных нами вариантов и делаете в обработчике что вам нужно

Пробовал, не работает так. Например, форма Заказать звонок (кнопка которой в шапке) открывается в отдельном окне, и в двух полях при изменении change ничего не происходит

@Mr_Sergo · 29.08.2020, 15:28

illusionX,

JavaScript
1
2
3
document.addEventListener('change', e => {  // в этой строке слово `change` это событие
  console.log(`Форма: ${e.target.closest('form').id}, инпут: ${e.target.name}`)
})

в коде читайте комментарии

Сообщение от illusionX

change

Для текстовых элементов это означает, что событие произойдёт не при каждом вводе, а при потере фокуса.

то есть когда вы переключаетесь с одного поля на другое
тут подробней о событиях https://learn.javascript.ru/ev... tie-change и там же почитайте про input
если вы хотите что бы что-то происходило при каждом вводе символов то замените событие change на input

Добавлено через 2 минуты
illusionX, аа ну и что бы вы видели что что-то произошло то откройте консоль браузера, в наших вариантах в консоль выводится

@illusionX · 29.08.2020, 15:28 **[ТС]**

Мне нужно именно change, я ввел в поле Введите имя и дальше переключился на поле Введите телефон. В этот момент должно сработать событие. Оно не срабатывает. input мне не подходит

@Mr_Sergo · 29.08.2020, 15:38

в гуглохроме F12 в остальных браузерах не знаю у всех браузеров может отличаться горячая клавиша

Добавлено через 2 минуты
illusionX, хорошо, попробуйте этот код

JavaScript
1
2
3
document.addEventListener('change', e => {  // в этой строке слово `change` это событие
  alert(`Форма: ${e.target.closest('form').id}, инпут: ${e.target.name}`)
})

и скажите что-то произошло при вводе и дальнейшем переключении с поля на поле ?

Добавлено через 6 минут
еще вариант...
вставьте код выше себе на сайт, сохраните, очистите кеш браузера, перезагрузите страницу и попробуйте change, именно в такой последовательности

@illusionX · 29.08.2020, 16:01 **[ТС]**

Да, спасибо, заработало. А можно как-то вывести в консоли разработчика вместо Форма: ${e.target.closest('form').id}, инпут: ${e.target.name} значения, которые пользователь ввел в полях? placeholder

@Mr_Sergo · 29.08.2020, 16:08

Сообщение от illusionX

значения, которые пользователь ввел в полях?

JavaScript
1
2
3
document.addEventListener('change', e => {
  console.log(`пользователь ввел: "${e.target.value}" в поле "${e.target.name}"`)
})

Добавлено через 50 секунд
но опять же скорее всего код закешировался и вам придется снова очищать кеш и т.д. как я описывал выше, погуглите как отключить кеширование в вашем браузере

Добавлено через 3 минуты
в гуглохроме это делается так, если у вас он:
открываете панель разработчика, переходите на вкладку Network, там ищите Disable cache и ставите галочку, теперь кеш не будет сохраняться пока открыта панель разработчика

@illusionX · 29.08.2020, 16:21 **[ТС]**

Спасибо большое. Это работает в консоли. Но я еще использую изолированную среду JavaScript, в которой не работает ECMASCRIPT6. Только предыдущей версии. Можно как-то изменить конструкцию?

@Mr_Sergo · 29.08.2020, 16:46

illusionX,

JavaScript
1
2
3
document.addEventListener('change', function (e) {
  console.log('пользователь ввел: "' + e.target.value + '" в поле "' + e.target.name + '"');
});

Добавлено через 17 минут
illusionX, вот на будущее https://babeljs.io/repl#?brows... alPlugins= конвертер ECMASCRIPT

@illusionX · 29.08.2020, 17:48 **[ТС]**

Спасибо! Все работает. И можете плз подсказать последнее - как указать конкретное условие для определенной формы. При такой конструкции код срабатывает и даже если я ввожу в input поле поиска на сайте, а не во всплывающей форме. А этого бы не хотелось. Планируется отслеживать, например, только 2 формы из 10.

document.querySelector('').addEventListe ner... пробовал - опять же у меня не цепляется за элемент, хотя условие для формы Заказать звонок я пишу такое:

JavaScript
1
2
3
document.getElementById('form-callback').addEventListener('change', function (e) {
  console.log('пользователь ввел: "' + e.target.value + '" в поле "' + e.target.name + '"');
});

За что лучше цепляться document.querySelector, document.getElementById или document.getElementClassName? Или последние 2 будут работать только в том случае, если есть идентификатор и класс у формы. В противном случае по селектору должно всегда работать?

Спасибо

@Mr_Sergo · 29.08.2020, 18:34

Сообщение от illusionX

как указать конкретное условие для определенной формы

у тех инпутов которые нужно отслеживать сделайте общий класс какой-нибудь и тогда можно будет так https://codepen.io/Mr_Sergo/pe... itors=1111 событие сработает только у первого и второго инпута

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form name="form1" id="one">
  <input type="text" name="inp11" class="some">
  <input type="text" name="inp12" class="some">
  <input type="text" name="inp13">
</form>
<form name="form2" id="two">
  <input type="text" name="inp21">
  <input type="text" name="inp22">
  <input type="text" name="inp23">
</form>
<form name="form3" id="three">
  <input type="text" name="inp31">
  <input type="text" name="inp32">
  <input type="text" name="inp33">
</form>

JavaScript
1
2
3
4
5
document.addEventListener('change', function (e) {
  if (e.target.classList.contains('some')) {
    console.log('пользователь ввел: "' + e.target.value + '" в поле "' + e.target.name + '"');
  }
});

Добавлено через 4 минуты
хотя наверное будет проще дать класс непосредственно самой форме и тогда можно сделать так https://codepen.io/Mr_Sergo/pe... itors=1111

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form name="form1" id="one" class="some">
  <input type="text" name="inp11">
  <input type="text" name="inp12">
  <input type="text" name="inp13">
</form>
<form name="form2" id="two">
  <input type="text" name="inp21">
  <input type="text" name="inp22">
  <input type="text" name="inp23">
</form>
<form name="form3" id="three">
  <input type="text" name="inp31">
  <input type="text" name="inp32">
  <input type="text" name="inp33">
</form>

JavaScript
1
2
3
4
5
document.addEventListener('change', function (e) {
  if (e.target.closest('form').classList.contains('some')) {
    console.log('пользователь ввел: "' + e.target.value + '" в поле "' + e.target.name + '"');
  }
});

@illusionX · 29.08.2020, 18:34 **[ТС]**

А если нет возможности этого сделать? Только использовать существующую разметку. На некоторых сайтах у меня получалось отслеживать change через:

JavaScript
1
2
3
4
(function() {
   var formSelector = 'CSS-селектор';
   document.querySelector(formSelector).addEventListener('change', function() {
   // Код

В этом случае, для этих форм так не проходит.

@Mr_Sergo · 29.08.2020, 19:38

illusionX, тогда делайте как вам предложил kidASM ...

ну в любом случае вам нужен какой-то общий класс или аттрибут у отслеживаемых элементов, ищите что есть у отслеживаемых элементов общего, класс или аттрибут может еще что-то

Добавлено через 9 минут
или есть еще вариант создать массив туда поместить отслеживаемые элементы и навесить прослушку как вам показал kidASM сейчас покажу пример

Добавлено через 10 минут
illusionX, change сработает только на 1 и 2 формах https://codepen.io/Mr_Sergo/pe... itors=1111

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form name="form1" id="one">
  <input type="text" name="inp11">
  <input type="text" name="inp12">
  <input type="text" name="inp13">
</form>
<form name="form2" id="two" class="some-1">
  <input type="text" name="inp21">
  <input type="text" name="inp22">
  <input type="text" name="inp23">
</form>
<form name="form3" id="three">
  <input type="text" name="inp31">
  <input type="text" name="inp32">
  <input type="text" name="inp33">
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.addEventListener('load', function () {
  
  var elements = [
    document.querySelector('[name="form1"]'),  // добавляем элемент по одному из атрибутов
    document.querySelector('.some-1')  // добавляем по классу
  ];
 
  for(var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('change', function (e) {
      console.log('пользователь ввел: "' + e.target.value + '" в поле "' + e.target.name + '"');
    });
  }
 
});

и таким образом для каждой отслеживаемой формы

Добавлено через 31 минуту
или если хотите отслеживать только ту форму которая появляется при клике по кнопке "Купить быстро" то попробуйте так

JavaScript
1
2
3
4
5
window.addEventListener('load', function () {
  document.querySelector('#form-order-quick').addEventListener('change', function (e) {
    console.log('пользователь ввел: "' + e.target.value + '" в поле "' + e.target.name + '"');
  });
});

похоже что это одна и та же форма

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@illusionX 8 / 8 / 0 Регистрация: 07.06.2009 Сообщений: 178

	Отслеживание изменений полей формы через событие change в попапе 28.08.2020, 20:44. Показов 9800. Ответов 14 Метки нет (Все метки) Всем добрый вечер! У меня есть сайт со всплывающими формами. У него есть формы, которые открываются во всплывающем окне. Я хочу отслеживать изменения полей формы с помощью события change. Но это всплывающая форма, и как я понимаю мне сначала нужно отслеживать изменение DOM-дерева (что этот элемент появился после открытия). Как это можно сделать с помощью JavaScript или jQuery? Спасибо 0

@illusionX 8 / 8 / 0 Регистрация: 07.06.2009 Сообщений: 178
	29.08.2020, 15:28 [ТС]
	Мне нужно именно change, я ввел в поле Введите имя и дальше переключился на поле Введите телефон. В этот момент должно сработать событие. Оно не срабатывает. input мне не подходит 0

@illusionX 8 / 8 / 0 Регистрация: 07.06.2009 Сообщений: 178
	29.08.2020, 16:01 [ТС]
	Да, спасибо, заработало. А можно как-то вывести в консоли разработчика вместо Форма: ${e.target.closest('form').id}, инпут: ${e.target.name} значения, которые пользователь ввел в полях? placeholder 0

@illusionX 8 / 8 / 0 Регистрация: 07.06.2009 Сообщений: 178
	29.08.2020, 16:21 [ТС]
	Спасибо большое. Это работает в консоли. Но я еще использую изолированную среду JavaScript, в которой не работает ECMASCRIPT6. Только предыдущей версии. Можно как-то изменить конструкцию? 0