CODEWITHSUNDEEP
javascriptjquery
Jeffrey Bauer
Jeffrey Bauer

Reputation: 14080

submit form when elements change

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:

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

However, if I want to the form to submit only when specified elements are changed:

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

I'm just learning jQuery. Is there a better way to do this?

Upvotes: 11

Views: 44491

Answers (4)

Lilleman
Lilleman

Reputation: 8121

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>

Upvotes: 3

Murat Ayfer
Murat Ayfer

Reputation: 3914

I would give an id to the form:

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

Upvotes: 5

Darko
Darko

Reputation: 38860

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

Upvotes: 13

tvanfosson
tvanfosson

Reputation: 532455

 /* 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()

Upvotes: 30

Related Questions