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

我会给表单提供一个id：

$(".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>

元素改变时提交表格

4 个答案: