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( 'Форма не отправлена' ); }
});