如何用JavaScript onclick禁用Django后端HTML表单提交按钮避免重复提交？

你可以通过在提交按钮上添加onclick事件，点击时直接禁用按钮并修改提示文本，实现提交后防止重复点击的效果，具体代码修改如下：

内联JavaScript实现（最简单） #

直接在按钮标签中添加onclick属性：

<form method="POST" action="{% url 'example' %}">
{% csrf_token %}

<input name="input" id="input-1" placeholder="Test Field">

<button type="submit" id="btn-1" onclick="this.disabled = true; this.textContent = '提交中...';">提交</button>
</form>

独立脚本实现（更易维护） #

如果不想把JS写在标签里，可以单独写脚本绑定点击事件：

<form method="POST" action="{% url 'example' %}">
{% csrf_token %}

<input name="input" id="input-1" placeholder="Test Field">

<button type="submit" id="btn-1">提交</button>
</form>

<script>
const submitBtn = document.getElementById('btn-1');
submitBtn.onclick = function() {
    this.disabled = true;
    this.textContent = '提交中...';
    // 确保表单正常提交（若按钮禁用后表单提交受影响时可添加）
    this.form.submit();
};
</script>

补充说明 #

• 点击按钮后，按钮会立即变为禁用状态，同时文本改为"提交中..."，避免用户重复点击触发多次后端请求。
• 如果你的表单有前端验证逻辑，需要先完成验证再禁用按钮，示例如下：

submitBtn.onclick = function() {
    const inputField = document.getElementById('input-1');
    if (!inputField.value.trim()) {
        alert('请输入内容');
        return false; // 阻止表单提交
    }
    this.disabled = true;
    this.textContent = '提交中...';
};

内容的提问来源于stack exchange，提问作者Kaiss B.