HTML按钮值无法提交到Django视图POST请求的问题排查

你拿不到按钮值的核心原因有两个：

• 普通<button>如果没有设置type="button"，默认是submit类型，浏览器只会把用户点击触发提交的那一个submit按钮的name/value放进POST请求体。你应该是用表单底部单独的提交按钮做提交，这两个选项按钮不属于触发提交的元素，自然不会被提交到后端。
• 你给两个选项按钮设置了不同的name属性（button_yes/button_no），本身也不符合单选字段同name提交的逻辑，就算能提交也没法统一获取单选结果。

不需要重写CSS替换原生radio，只需要加一个隐藏表单字段存选中值，配合少量JS同步选中状态即可，完全不改动你现有的按钮样式和DOM结构。

具体实现步骤 #

• 给两个选项按钮加上type="button"，避免点击选项时意外触发表单提交
• 在按钮组内部加一个和单选字段同名的隐藏input，默认值和初始带active类的选中项保持一致
• 加少量JS监听按钮点击事件，切换active样式的同时，把选中的值同步到隐藏input
• 确保所有表单元素（包括隐藏input、其他输入框、csrf字段、提交按钮）都被<form>标签包裹

代码示例 #

修改后的HTML模板 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<form method="POST" action="/">
  <!-- 原有表单字段、csrf_token保留即可 -->
  <input type="hidden" name="csrfmiddlewaretoken" value="你的csrftoken">
  <input type="text" name="FirstName" placeholder="First Name">
  <input type="text" name="LastName" placeholder="Last Name">
  <textarea name="Message" placeholder="Message"></textarea>

  <div data-value="attending" class="radio-tempo col-sm-12">
    <!-- 新增隐藏字段，存储单选选中值 -->
    <input type="hidden" name="attending" id="attending-input" value="yes">
    <!-- 给选项按钮加type="button"，避免误触发提交 -->
    <button type="button" class="btn btn-default active" data-value="yes"><i class="fa fa-smile-o"></i>Yes</button>
    <button type="button" class="btn btn-default" data-value="no"><i class="fa fa-frown-o"></i>No</button>
  </div>

  <button type="submit">提交</button>
</form>

同步选中状态的JS代码 #

// 绑定选项按钮点击事件
document.querySelectorAll('.radio-tempo button').forEach(btn => {
  btn.addEventListener('click', function() {
    // 切换同组按钮的active样式
    const group = this.closest('.radio-tempo')
    group.querySelectorAll('button').forEach(b => b.classList.remove('active'))
    this.classList.add('active')
    // 把选中值同步给隐藏输入框
    group.querySelector('#attending-input').value = this.dataset.value
  })
})

Django后端取值代码 #

def index(request):
    if request.method == 'POST':
        print(request.POST)
        # 直接取对应name的字段即可，值为yes/no
        attending = request.POST.get('attending')
        # 后续业务逻辑处理
    return render(request, 'index.html')

修改完成后提交表单，POST请求里就会正常带上attending字段的选中值，你原来的按钮样式、交互效果完全不会变。

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