如何在Django中不使用input标签，通过提交按钮提交文本？

嘿，我懂你想要的效果——把原来的输入框全删掉，只留个提交按钮就能把指定的文本内容提交给后端是吧？这里有两个实用的方案，完全符合你的需求：

方案1：用button元素直接携带提交内容 #

button元素本身支持name和value属性，当表单提交时，这两个属性会作为键值对被发送到后端。如果只需要提交单个字段，这种方法最简单：

{% extends 'header.html' %}
{% load staticfiles %}
{% block content %}
<h3> Question</h3>
<img src="/media/{{ image }}" >
<br>
<br>
<h3> Responses </h3>
<form method="post" action="/tools/submit">
{% csrf_token %}
<!-- 点击按钮就会把first_response=预设文本发送到后端 -->
<button type="submit" name="first_response" value="你要提交的第一个响应文本">提交响应</button>
</form>
{% endblock %}

如果需要提交多个字段（比如原来的first_response和second_response），推荐用下面的方案2实现。

方案2：用JavaScript动态添加提交数据（无任何输入标签） #

这种方法完全不需要任何input/textarea等输入标签，所有要提交的内容都通过JavaScript动态添加，灵活性更高，适合多字段提交的场景：

{% extends 'header.html' %}
{% load staticfiles %}
{% block content %}
<h3> Question</h3>
<img src="/media/{{ image }}" >
<br>
<br>
<h3> Responses </h3>
<form id="response-form" method="post" action="/tools/submit">
{% csrf_token %}
<button type="submit">提交响应</button>
</form>

<script>
// 给表单绑定提交事件
document.getElementById('response-form').addEventListener('submit', function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    
    // 创建FormData对象，自动包含csrf_token
    const formData = new FormData(this);
    
    // 添加你要提交的文本内容，这里可以加多个字段
    formData.append('first_response', '预设的第一个响应文本');
    formData.append('second_response', '预设的第二个响应文本');
    
    // 用fetch发送数据到后端
    fetch(this.action, {
        method: this.method,
        body: formData
    }).then(response => {
        // 提交成功后的逻辑，比如跳转页面或提示用户
        if (response.ok) {
            window.location.href = '/tools/submit-success'; // 示例跳转地址
        }
    });
});
</script>
{% endblock %}

小提示 #

如果要提交的是视图传递过来的模板变量（比如动态内容），直接把JavaScript里的固定文本换成模板变量就行，比如：

formData.append('first_response', '{{ dynamic_first_response }}');

后端处理逻辑完全不用改，依然可以用request.POST.get('first_response')来获取提交的内容哦。

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