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并将此对象传递给函数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");
            },
        });
    }

使用ajax并且没有表单id的表单的Onchange提交

1 个答案: