使用 AJAX 为多个表单提交表单 OnChange答案

【问题标题】：Submit form OnChange for multiple forms with AJAX使用 AJAX 为多个表单提交表单 OnChange
【发布时间】：2013-01-08 03:10:36
【问题描述】：

我有一个包含多个表单的页面，我想通过 PHP 将其值提交并存储到 mySQL 数据库中。我的问题与此处提出的问题 (submitting multiple forms with AJAX) 非常相似，但理想情况下我想提交每个表单 onChange() 以进行处理并存储在数据库中。

我的表单一般如下所示：

<form name="form1" id="form1" action="" method="POST"> 
  <input type="text" class="input-block-level" placeholder="Placeholder text">
  <input type="text" class="input-block-level" placeholder="Placeholder text">
</form>
....
<form name="form2" id="form2" action="" method="POST"> 
  <input type="text" class="input-block-level" placeholder="Placeholder text">
  <input type="text" class="input-block-level" placeholder="Placeholder text">
</form>
....

还有我当前的 jQuery/AJAX 代码：

$(document).ready(function () {
    $('#form1').change(function () {
    $.post('process.php', $("#form1").serialize(), function(data) {
        $('#results').html(data);
        });
    });

});

理想情况下，我不需要为每个表单复制/粘贴这个 sn-p（我有很多不同的表单），而是可以有一个代码块，当它被更改时，它适用于任何表单。任何帮助将不胜感激。

【问题讨论】：

标签： jquery ajax forms form-submit onchange

【解决方案1】：

您可以在所有表单中添加一个 CSS 类并检索所有表单以完成相同的工作。

$(document).ready(function () {

    // Retrieve all form on the page
    $('.formAjax').change(function () {
        $.post('process.php', $(this).serialize(), function(data) {
            // Update the result area
            $('#results').html(data);
        });
    });
});

假设您已将良好的 CSS 类添加到所有表单中。

<form name="form1" id="form1" action="" class="formAjax" method="POST">

注意：每个表单的id都没用

【讨论】：