Javascript 使用ajax且不带表单id的表单的Onchange submit

我的页面由一个表组成，其中每个单元格都是一个表单。 我希望在更改输入值（onchange）时提交这些表单，但我不希望在更改时刷新整个页面

例如，我希望用户能够在一个单元格中输入一个值，然后在提交第一个表单（他们填写的第一个单元格）时，在不失去焦点的情况下切换到下一个单元格

我在网上读了很多关于这方面的文章，但是没有一篇适合我的需要，因为我还有一个限制。我的表格是由Django生成的，因此它们都具有相同的id。 因此，我不能使用id从（java）脚本中选择表单

我一直在尝试使用this.form或event.form或$（this.form），但没有效果

以下是这些表单的外观：

<form action="" method="POST" id="progress_form">
{% csrf_token %}
<input type="number" id="percent_cell" name="percentdone" min="0" max="100" onchange="progressChange(event)" placeholder={{ d|prog:task.id }}>%&nbsp;
<input type="hidden" id="percent_cell2" name="task" value={{ task.id }}>
<input type="hidden" id="percent_cell3" name="date" value={{ d|date:"d/m/Y" }}>
<input type="hidden" id="percent_cell4" name="update_progress" value=True>
<input type="hidden" id="percent_cell5" name="tab" value="track">
</form>

---

更改多个字段的相同Id，并将this对象传递给函数progressChange（）

---

为什么会有多个输入具有相同的

id

属性？可能是

$（this）.最近（'form'）

？使用类而不是Id或更改Id。更改Id是不够的。根据用户的输入，单元格的数量可能会发生变化。不可能为每个可能的ID创建脚本，因为该数字是动态的。在许多对象上具有相同的ID是无效的！我已经改变了输入ID，因为每个人都被这个事实欺骗了。这只是复制和粘贴的结果。我曾尝试按照您的建议传递“this”，并通过“obj.parent”获取表单，但我在控制台中遇到以下错误：'未捕获的TypeError:undefined不是一个函数'为什么'元素'在第二行？实际上我复制粘贴了它很抱歉，请检查更新的代码乐意帮助欣赏：）是的，你是对的。我责怪告诉我“这件事”和“事件”是同一件事的网站：）

function progressChange(e) {
        var form = e.form;
        var dataString = form.serialize();
        alert(dataString);
        $.ajax({
            type: "POST",
            url: $(form).attr( 'action' ),
            data: dataString,
            success: function() {
                alert("prout");
            },
        });
    }

<form action="" method="POST" id="progress_form">
{% csrf_token %}
<input type="number" id="percent_cell0" name="percentdone" min="0" max="100" onchange="progressChange(this)" placeholder={{ d|prog:task.id }}>%&nbsp;
<input type="hidden" id="percent_cell1" name="task" value={{ task.id }}>
<input type="hidden" id="percent_cell2" name="date" value={{ d|date:"d/m/Y" }}>
<input type="hidden" id="percent_cell3" name="update_progress" value=True>
<input type="hidden" id="percent_cell4" name="tab" value="track">
</form>

function progressChange(obj) {
        var $form = $(obj).closest('form'); // OR var form = obj.from;
        var dataString = $form.serialize();
        alert(dataString);
        $.ajax({
            type: "POST",
            url: $(form).attr( 'action' ),
            data: dataString,
            success: function() {
                alert("prout");
            },
        });
    }