Django+JS实现点击数字自动保存：无需手动点击发送按钮

核心思路 #

给数量输入框添加事件监听，当用户选择/输入数字后，自动触发表单提交操作，无需手动点击「Send」按钮。

修改后的模板代码 #

<form action="{% url 'cart:cart_add' product.id %}" method="post">
    {% csrf_token %}
    {{ item.update_quantity_form.quantity }}
    {{ item.update_quantity_form.update }}
    <!-- 可选：隐藏原生提交按钮，不需要的话可删除此行 -->
    <input type="submit" value="Send" style="display:none;">
</form>

添加JavaScript代码 #

将以下代码放在模板底部（</body>标签前）或项目公共JS文件中：

// 通过Django表单字段自动生成的ID精准获取输入框
const quantityInput = document.getElementById('{{ item.update_quantity_form.quantity.id_for_label }}');

// 监听change事件：下拉框选择完成/输入框失去焦点时触发提交
quantityInput.addEventListener('change', function() {
    // 直接提交当前输入框所属的表单
    this.form.submit();
});

// 可选：如果需要实时输入时立即提交（比如用户敲数字就保存），替换为input事件
// quantityInput.addEventListener('input', function() {
//     this.form.submit();
// });

补充说明 #

• 用this.form直接关联输入框所属表单，无需额外给表单加ID，代码更简洁灵活
• 若使用input事件，注意频繁提交可能带来的服务器压力，可按需添加防抖逻辑（比如延迟500ms再提交）
• 若仍需保留「Send」按钮供手动提交，移除提交按钮的style="display:none;"即可

内容的提问来源于stack exchange，提问作者Daniil Filippov