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?

4 Answers

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

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

I would give an id to the form:

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

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> <select><option>1</option><option>2</option></select> </form> 

Only individual elements

<form> <select><option>1</option><option>2</option></select> </form>