Как сделать яваскрипт событие при заполнение формы?

Question

[Влад]

Хочу делать отслеживание события для Google Analytics, которое будет срабатывать при начале заполнения формы и при этом единожды.

То есть, например,

form
input
input
textarea
submit
form

При заполнение любого из полей срабатывает событие. При этом повторное заполнения других или этого же поля уже не надо выполнять событие.

Answer 1

[Mikola-BLR]

var firstTime = true;
var nodeList = document.querySelectorAll('input, textarea');

Array.prototype.forEach.call(nodeList, function (node) {
    node.addEventListener('input', doSomething);
});

function doSomething() {
    if (firstTime) {
        // ваш код здесь
        firstTime = false;
    }
}

Если есть инпуты за пределами формы, по нужно указать более точный селектор:

document.querySelectorAll('form input, form textarea');

PS.
Если использовать jQuery:

var firstTime = true;

$('input, textarea').on('input', doSomething);

function doSomething() {
    if (firstTime) {
        // ваш код здесь
        console.log('input'); // <- можно посмотреть, как отрабатывают события input и change
        firstTime = false;
    }
}

Событие input срабатыват сразу, как только мы начинаем что-то набирать, а change - когда мы что-то ввели и нажали за пределами элемента, т.е. у него пропал фокус.

Comments

[Влад]

спасибо.
а я вот такой код написал - он ведь по смыслу тоже сработает?

function getCookie(name) {
            var matches = document.cookie.match(new RegExp(
                "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
            ));
            return matches ? decodeURIComponent(matches[1]) : undefined;
        }

        $( ".wpcf7-form" ).change(function() {
            if(getCookie("formclick") != 1) {
                yaCounter45312216.reachGoal('formchange');
                ga('send', 'event', 'Лид', 'Изменение формы');
            }

            var date = new Date(new Date().getTime() + 60 * 60 * 24 * 1000);
            document.cookie = "formclick=1; path=/; expires=" + date.toUTCString();

        });

[Mikola-BLR]

Влад, если вам нужно, чтобы событие срабатывало один раз и даже при новом посещении больше не срабатывало, то, конечно, надо использовать куки.
Если же надо обрабатывать событие при каждом посещении, но один раз, то, оно уже не сработает, т.к. стоит куки.
Условие
getCookie("formclick") != 1
не выполнится и код

yaCounter45312216.reachGoal('formchange');
ga('send', 'event', 'Лид', 'Изменение формы');

не выполнится тоже.

PS.
Проще говоря,
- код с переменной firstTime будет отрабатывать один раз при каждом посещении страницы пользователем.
- код с Cookie выполнится один раз для пользователя вне зависимости, сколько раз он зашёл на страницу. Пока не истечёт время куки, пока она не будет удалена где-нибудь у вас в коде или пока пользователь сам не почистит куки. Соответственно с отключёнными куками код будет срабатывать каждый раз при изменении input / textarea.