Как отправить форму по событию CHANGE SELECT?

Question

[Cheizer]

Друзья, есть несколько форм на странице, и скрипт который отправляет AJAX методом данные каждой формы отдельно. Тут порядок. Отправляются формы по клику на кнопке SEND. По событию submit.
Вопрос. Как отправлять форму - INIT скрипта cделать, по событию CHANGE SELECT?

Вот одна из форм, кнопку SEND хочу убрать, поэтому такая задача.

<form id="ajax-form" class="ajax-form">
<select name="date">
<option value="0" selected="">All</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2017">2017</option>
</select>

<select name="event">
<option value="0" selected>All</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<a href="#" data-type="submit" class="theme-button">SEND</a>
</form>

Вот сам код, each обходит по всем формам, и через serialize отправляет данные дальше (код упрощен для понимания).

$.fn.forms = function (o) {
        return this.each(function () {
            var th = $(this),
                _ = th.data('forms') || {
                    controls: 'a[data-type=reset],a[data-type=submit]',

                    submitFu: function () {
                            $.ajax({
								data: _.form.serialize(),
                            })
                    },
                    controlsFu: function () {
                        $(_.controls, _.form).each(function () {
                            var th = $(this)
                            th
                                .bind('click', function () {
                                    _.form.trigger(th.data('type'))
                                    return false
                                })
                        })
                    },
                    init: function () {
                        _.form = _.me
                        _.controlsFu()
                        _.form
                            .bind('submit', function () {
                                    _.submitFu()
                            })
                    }
                }
            _.me || _.init(_.me = th.data({
                forms: _
            }))
            typeof o == 'object' && $.extend(_, o)
        })
    }

Пробую так делать, после этого кода

$('select').on('change', function() {
      $.fn.forms();
     $(this).submit().forms();
  });

Но не работает так :( Можно конечно вызвать триггер клик по кнопке, а саму кнопку в display:none но я хочу убрать кнопку совсем. Как запустить INIT скрипта, по событию CHAGE SELECT? Вместо SUBMIT кнопки.
Подскажите ПОЖАЛУЙСТА!!!

Comments

[ReaverJS]

А почему $(this).submit().forms();
И почему $(this).submit().forms();
Разве если вызвать просто submit формы - не выстрелит?
$("#ajax-form").submit();
Ну вместо #ajax-form - форма, а не селект.

[Cheizer]

ReaverJS, $(this).submit().forms(); THIS потому что несколько форм на странице и так универсальнее чем жестко прописывать по ID, и .submit() просто не работает, формы отправляются AJAX методом и скрипт принимает атрибут submit и после отправляет. Ваш пример не работает, страница просто перезагружается, мимо скрипта.

[ReaverJS]

Роман Кузнецов, $(this) в консоли форму выводит?

[Cheizer]

Да, если сделать так
$('select').on('change', function() {
console.log($(this));
});

В консоли
n.fn.init [select, context: select]

Answer 1

[Cheizer]

Разобрался методом тыка и интуиции, нужно было добавить в BIND кода еще BIND на CHANGE

.bind('change', function () {
                                    _.submitFu()
                            })