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 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>
