$(function () { // выполнять после построения DOM (страница загружена)
// обрабатывать будем события отправки всех форм с атрибутом data-toggle="ajax"
// например
// <form action="form.php" method="post" data-toggle="ajax">
$('[data-toggle="ajax"]').on('submit', function (e) {
e.preventDefault(); // отменяем отправку браузером
let $form = $(this); // сохраняем форму в переменную
let $button = $('[type="submit"]', $form); // находим кнопку сабмит внутри этой формы
let data = $form.serialize(); // собираем данные из всех полей
let action = $form.data('action') || $form.attr('action'); // получаем URL куда будем отправлять (form.php из action формы)
let method = $form.attr('method'); // тут метод отправки GET/POST
let response = $form.data('response') || 'html'; // тип ожидаемого от сервера ответа, если не задано - простой html
$button.attr('disabled', true); // дизаблим кнопку сабмит
// генерим событие "щас будем отправлять форму".
// это опционально, я просто код дернул из проекта.
$form.trigger('beforeSend');
// ну тут вроде знакомый jQuery метод
// передаем туда все данные что только что насобирали и отправляется запрос.
$.ajax({
url : action,
type : method,
data : data,
dataType: response
}).then(function (data) { // успешно отправлено, получен ответ в data
$button.attr('disabled', false); // включаем кнопку отправки
$form.trigger('success', [data]); // генерим событие успеха на форме.
// тоже опционально, можно прямо здесь писать что нужно сделать при успехе.
}).fail(function () { // отправка не удалась, ошибка
$button.attr('disabled', false); // включаем кнопку отправки
$form.trigger('error'); // генерим событие ошибки на форме.
// тоже опционально, можно прямо здесь писать что нужно сделать при успехе.
});
});
});
Свой валидатор написать это конечно
gulp
- он ищет задачу с именем "default"gulp somecommand
- он ищет задачу с именем "somecommand" .heading h1, .heading .h1 {
font-size: 2.42857rem;
line-height: 3.42857rem; }
.apartments-menu {
padding-top: 1.28571rem;
padding-bottom: 1.28571rem; }
.heading h1, .heading .h1 {
@include adjust-font-size-to(24px, 1.5); }
.apartments-menu {
@include padding-leader(1);
@include padding-trailer(1); }
https://jsfiddle.net/qf8wg1go/2/