JS События

JS События

Quasar Form генерирует события DOM при отправке формы, чтобы вам было проще использовать свои собственные скрипты.

Функция, которая будет запускаться каждый раз, при нажатии кнопки отправки (submit):

$(document).on('click', '.submit-quasar-form-event', function(){
console.log('ваши действия');
});

Вы можете выполнять любые действия в этой функции.

Переменная, содержащая данные отправки — arraySubmit, если форма отправлена ​​успешно, она содержит массив всех значений полей, если форма не была отправлена, используется значение false .

Пример функции обработки содержимого полей формы:

$(document).on('click', '.submit-quasar-form-event', function(){

if (typeof arraySubmit === 'object'){
$.each( arraySubmit, function(index,value){
console.log( value );
});
}
else { console.log( 'Форма не отправлена' ); }

});

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

Для этого есть переменная idThisForm — она содержит уникальный id формы, которая была отправлена.

Пример:

$(document).on('click', '.submit-quasar-form-event', function(){

if (typeof arraySubmit === 'object'){
if ( idThisForm == 1 ) { console.log( 'Отправлена форма с id 1' ); }
if ( idThisForm == 2 ) { console.log( 'Отправлена форма с id 2' ); }
}
else { console.log( 'Форма не отправлена' ); }

});

Как реализовать отслеживание целей в Яндекс метрики при оправках форм?

Для этого нам надо использовать действие для активации целей — ym(1111111, ‘reachGoal’, ‘target-1’);

В приведенном действии: 1111111 — это id вашего счетчика Яндекс метрики, target-1 — название цели

Рассмотрим пример, допустим у нас на сайте есть 2 формы, для которых мы создали 2 цели target-1 и target-2:

$(document).on('click', '.submit-quasar-form-event', function(){

if (typeof arraySubmit === 'object'){
if ( idThisForm == 1 ) { ym(1111111, 'reachGoal', 'target-1'); }
if ( idThisForm == 2 ) { ym(1111111, 'reachGoal', 'target-2'); }
}
else { console.log( 'Форма не отправлена' ); }

});

Скриншот, как выглядит цель в яндекс метрики

Получить отдельно данные чекбоксов и текстовых полей

Кроме общего массива данных из полей формы arraySubmit, есть раздельные массивы. Это может быть полезно для интеграции с некоторыми CRM.

arrayCheckbox — массив, содержащий данные о заполненных чекбоксах (простые чекбоксы и чекбоксы картинки)

arrayTextField — массив, содержащий данные о заполненных текстовых полях (все поля с input и textarea)

Пример:

$(document).on('click', '.submit-quasar-form-event', function(){

if (typeof arraySubmit === 'object'){

//перебираем текстовые поля
$.each( arrayTextField, function(index,value){
console.log( value );
});

//перебираем чекбоксы
$.each( arrayCheckbox, function(index,value){
console.log( value );
});
}
else { console.log( 'Форма не отправлена' ); }

});