元素更改时提交表单答案

【问题标题】：submit form when elements change元素更改时提交表单
【发布时间】：2008-12-01 01:48:24
【问题描述】：

在 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。有没有更好的方法来做到这一点？

【问题讨论】：

这是你用的特殊插件，还是我没听说过的jQuery的一些内置功能？

标签： javascript jquery

【解决方案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()选择作为当前元素祖先的表单

【讨论】：

使用“this.form.submit();”会更好，因为您不必实例化 jQuery 对象。
@tvanfosson 任何提示如何使用此解决方案防止页面刷新？ preventDefault() 和 return false 不工作:(
@Toon 此代码导致表单执行正常提交。如果您不想刷新页面，请序列化表单并通过 AJAX 发送。 var $form = $('form'); var data = $form.serialize(); $.ajax($form.attr('action'), { data: data, type: 'POST' }).done(...);

【解决方案2】：

您可以在parents() 方法中使用表达式来过滤父母。因此，这可能会更有效一些：

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

【讨论】：

【解决方案3】：

我会给表格一个 id：

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

【讨论】：

【解决方案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>

【讨论】：