更改使用 ajax 且不带表单 ID 的表单提交

Onchange submit of a form with ajax and without the form id

本文关键字：表单 ID 表单提交 ajax      更新时间：2023-09-26

我的页面由一个表格组成，其中每个单元格都是一个表单。我希望这些表单在我更改输入值时提交（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");
            },
        });
    }

更改多个字段的相同 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>

获取当前对象 Parent 元素，即表单并序列化它：

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");
            },
        });
    }
相关文章：