submit form when elements change

Question

In jQuery, if I assign class=auto_submit_form to a form, it will be submitted whenever any element is changed, with the following code:

/* autom         


        

Answer 1

I would give an id to the form:

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

Answer 2

I came up with a generic approach to this:

$('.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();
});

All elements of a form:

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

Only individual elements

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

Answer 3

You can use an expression in the parents() method to filter the parents. Hence this might be a little more efficient:

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

Answer 4

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

Assumes you only have one form on the page. If not, you'll need to do select the form that is an ancestor of the current element using $(this).parents("form").submit()