jQuery State form или простой контроль за формой

в 15:40, , рубрики: javascript, jquery, jquery plugins, web-разработка, метки: , ,

Доброго времени %username%!

Хочу представить на суд общественности один интересный плагин для контроля за состоянием формы.
Что такое «состояние формы»? Это слепок тех значений, которые были установлены в форме на момент её инициализации. В плагине нет ничего лишнего, никакого «преферанса и блудниц», только то, для чего он разрабатывался, а именно контроль за изменением значений в форме. Для чего это нужно? Ну, бывают всякие ситуации, например, для логирования изменений, которые были внесены в данные. Можно попробовать контролировать событие ухода со страницы, вдруг, пользователь что-то ввел, а сохранить забыл?

Кому интересно, можно поиграться на jsfiddle.

Сам по себе плагин крайне прост. Инициализация:

$(document).ready(function() {
    $('form').state_form();
});

или расширенные вариант:

$(document).ready(function() {
    $('form').state_form({
        //name input in form
        inputName: 'changed_state',  //is default
        //add input with changes in form
        insertInForm: 1, //is defaul
        //function before form submit
        //call if form has changes
        ifChanged: function() { //is default
            return true;
        },
        //field for excluded
        exclude: ['field1', 'field2']
    });
});

Проверка изменения состояния:

$('form').state_form('is_changed');

Получить изменённые поля:

$('form').state_form('get_changes');

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

Исходный код github.com/Slavenin/state_form
Буду рад комментариям и предложениям!
Благодарю за внимание!

Автор: Slavenin999

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js