Django如何实现提交表单时将选中按钮值存入SQLite数据库

1. 调整前端HTML代码 #

你的原始HTML需要补充3个核心内容：Django表单必填的csrf校验令牌、存储选中值的隐藏输入框、按钮的选中标识类，修改后代码如下：

<body>
<div class="row">
<form action="" method="post">
    {% csrf_token %}
    <!-- 隐藏输入框，用于暂存用户选中的按钮value，提交时自动传给后端 -->
    <input type="hidden" name="selected_value" id="selected_value" value="">
    <div class="col-md-4">
        <button type="button" class="btn btn-primary btn-lg overflow-hidden select-btn" value="1">Example1</button>
    </div>
    <div class="col-md-4">
        <button type="button" class="btn btn-primary btn-lg overflow-hidden select-btn" value="2">Example2</button>
    </div>
    <div class="col-md-4">
        <button type="button" class="btn btn-primary btn-lg overflow-hidden select-btn" value="3">Example3</button>
    </div>
</div>
<input type="submit" value="Send to database">
</form>
</body>

你的模型代码不需要修改，保持原样即可：

class ValuesButtons(models.Model):
   value = models.CharField(max_length=100, verbose_name="Value")

2. 新增JS选中逻辑 #

添加JS代码实现点击按钮时，将对应value存入隐藏输入框，同时高亮选中的按钮方便用户识别：

<script>
const selectBtns = document.querySelectorAll('.select-btn');
const selectedValueInput = document.getElementById('selected_value');

selectBtns.forEach(btn => {
    btn.addEventListener('click', function() {
        // 先清除所有按钮的选中样式
        selectBtns.forEach(b => b.classList.remove('btn-success'));
        // 给当前点击按钮加选中样式
        this.classList.add('btn-success');
        // 把当前按钮的value赋值给隐藏输入框
        selectedValueInput.value = this.value;
    })
})
</script>

这里用Bootstrap自带的btn-success类做选中样式，你可以根据自己的需求自定义选中样式

3. 编写Django视图处理逻辑 #

在对应app的views.py中添加表单处理逻辑，接收前端传的选中值并存入数据库：

from django.shortcuts import render, redirect
from .models import ValuesButtons

def save_button_value(request):
    if request.method == 'POST':
        selected_val = request.POST.get('selected_value')
        # 判断是否选中了按钮，值不为空再存库
        if selected_val:
            ValuesButtons.objects.create(value=selected_val)
            # 存储成功后可以重定向到成功页或者当前页刷新
            return redirect('当前页的路由名')
    # GET请求就渲染表单页面
    return render(request, '你的HTML文件名.html')

4. 配置URL路由 #

在对应app的urls.py中绑定路由：

from django.urls import path
from . import views

urlpatterns = [
    path('save-btn-value/', views.save_button_value, name='save_btn_value'),
]

配置完成后，form标签的action属性填{% url 'save_btn_value' %}即可正常提交。

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