AJAX 仅获取最后一个表单的值

Question

我正在使用 AJAX 自动更新文本输入和文本区域并将它们保存到数据库中。

一切正常，直到有两个相同的形式为止。我发现 AJAX 函数正在从表单中获取值。我用

console.log(data)

检查过。我想知道最后一种形式是否会压倒一切。

如果所有名称都是唯一的，它也可以正常工作。然而，我的 SQL 代码会有很多重复，如果用户制作 10 个这样的表单，效率就不会很高。

我怎样才能避免这种情况发生？

谢谢！

index.php

<form method="post" class="form-input">
    <input type="hidden" name="position" value="1" class="position">
    <table>
        <tbody>
            <tr>
                <td class="th">Offer Heading</td>
                <td><input name="heading" class="text-input" type="text"></td>
            </tr>
            <tr>
                <td class="th">Description</td>
                <td><textarea name="description"></textarea></td>
            </tr>
            <tr>
                <td class="th">Call-To-Action</td>
                <td><input name="call_to_action" class="text-input" type="text"></td>
            </tr>
        </tbody>
    </table>
</form>

script.js

    var timeoutId;
    $('textarea, .text-input').on('input propertychange change', function() {
        console.log('Textarea Change');

        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
            // Runs 1 second (1000 ms) after the last change
            saveToDB();
        }, 1000);
    });
    
    function saveToDB() {
        console.log('Saving to the db');
        var data = $(".form-input").serialize();
        console.log(data);
        $.ajax({
            url: "",
            type: "POST",
            async: true,
            cache: false,
            data: data,
            success: function(data){
                console.log('completed');
            }
        });
    }
    
    $('.form-input').submit(function(e) {
        saveToDB();
        e.preventDefault();
    });

谢谢！

Answer 1

你的Jquerty版本是什么？？