javascript - 提交表单而不点击更新或提交按钮

Question

我有一个表单，一旦对表单中的某个字段进行了某些更改，我需要立即提交表单，而无需用户单击更新或提交按钮。

我熟悉 AJAX，我可以使用按钮通过 AJAX 提交表单，但我现在需要将其更改为用户在其中一个字段中键入内容后立即提交表单

目前，我将 .keydown() 放在每个输入字段上，尽管它可以工作，但这使得脚本非常长，我想知道是否有更好的方法来处理它。这就是我对各个字段执行的操作来检测更改

if ($("#some_field").length) {
    var timer = null;
    $('#some_field').keydown(function () {
        clearTimeout(timer);
        timer = setTimeout(update, 1000)
    });

    function update(){
        $.ajax({
            ...
            ...
            ...
    }
});
}
}

我非常感谢这里的任何帮助。

Answer 1

创建要用于处理表单提交的函数。它让您有机会决定是否要使用 ajax 或默认表单提交:

function submitForm() {
   var form = $(this).closest('form')[0];
   form.submit();
   //or $.ajax( ... );
}

然后，只需对所有输入元素使用一个选择器 :input ，或者使用一个公共(public)类，并使用 input 事件，即使用户将文本粘贴到其中，该事件也会捕获输入之一:

$(':input').on('input', submitForm);

更新

要监听 jQuery UI 日期选择器事件，请添加 change 事件，如下所示:

$(':input').on('input change', submitForm);

function submitForm() {
        var form = $(this).closest('form')[0];
        alert( 'About to submit form to ' + form.action );
       //form.submit();
       //or $.ajax( ... );
    }

    $(':input').on('input', submitForm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="/form/update.php" method="post">
  Field 1: <input type="text" name="field1"/><br>
  Field 2: <input type="text" name="field2"/><br>
  Field 3: <input type="text" name="field3"/><br>
</form>