Onchange 提交带有 ajax 且没有表单 ID 的表单

Question

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

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

我已经在网上阅读了很多关于此的页面，但没有一个符合我的需求，因为我还有一个限制。我的表格构成的表格是通过 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>

这是我的脚本的样子：

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");
            },
        });
    }

Answer 1

更改多个字段的相同 ID 并将 this 对象传递给函数 progressChange()

<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");
            },
        });
    }