отправить форму при изменении элементов

Question

В jQuery, если я назначу class=auto_submit_form форме, она будет отправлена ​​при каждом изменении любого элемента со следующим кодом:

/* automatically submit if any element in the form changes */
$(function() {
  $(".auto_submit_form").change(function() {
    this.submit();
  });
});

Однако, если я хочу, чтобы форма отправлялась только при изменении указанных элементов:

/* submit if elements of class=auto_submit_item in the form changes */
$(function() {
  $(".auto_submit_item").change(function() {
    $(this).parents().filter("form").submit();
  });
});

Я только изучаю jQuery. Есть ли лучший способ сделать это?

Answer 1

 /* submit if elements of class=auto_submit_item in the form changes */
$(function() {
   $(".auto_submit_item").change(function() {
     $("form").submit();
   });
 });

Предполагается, что у вас есть только одна форма на странице. Если нет, вам нужно выбрать форму, которая является предком текущего элемента, используя $(this).parents("form").submit()

Answer 2

Вы можете использовать выражение в методе parents() для фильтрации родителей. Следовательно, это может быть немного более эффективным:

/* submit if elements of class=auto_submit_item in the form changes */
$(".auto_submit_item").change(function() {
    $(this).parents("form").submit();
});

Answer 3

Я бы дал идентификатор для формы:

$(".auto-submit-item").change(function() {
    $("form#auto-submit").submit();
});

Answer 4

Я придумал общий подход к этому:

$('.autoSubmit, .autoSubmit select, .autoSubmit input, .autoSubmit textarea').change(function () {
    const el = $(this);
    let form;

    if (el.is('form')) { form = el; }
    else { form = el.closest('form'); }

    form.submit();
});

Все элементы формы:

<form class="autoSubmit">
    <select><option>1</option><option>2</option></select>
</form>

Только отдельные элементы

<form>
    <select class="autoSubmit"><option>1</option><option>2</option></select>
</form>