Django中通过JavaScript赋值的tfoot内td值无法保存至数据库，报total列非空错误

嘿，我来帮你搞定这个问题！你遇到的Column 'total' cannot be null报错，核心原因其实很简单：<td>不是表单控件，浏览器默认不会把它的内容包含在POST提交的数据里，哪怕你给它加了name属性也没用。

为什么会这样？ #

只有标准的表单控件（比如<input>、<textarea>、<select>这类）才会在表单提交时自动把自身的值发送给后端。你的<td>只是一个表格单元格，用来展示内容，不属于表单控件范畴，所以request.POST.get('total')自然拿不到任何值，最终导致数据库因为total字段非空而报错。

两种可行的解决方案 #

方案一：用隐藏<input>同步值（最推荐）

在表单里添加一个隐藏的<input>元素，把它的name设为total，然后用JavaScript把计算好的总额同时赋值给这个隐藏input和展示用的<td>。这样表单提交时，隐藏input的值就会被自动包含在POST数据中。

修改后的HTML：

<tfoot>
  <tr>
    <th colspan="5"></th>
    <th id="total">Total :</th>
    <td id="total_value"></td>
    <!-- 新增隐藏input，用来传递total值 -->
    <input type="hidden" name="total" id="hidden_total">
  </tr>
</tfoot>

对应的JavaScript代码：

// 假设你已经通过逻辑计算得到了总额totalAmount
const totalAmount = 150; // 替换成你的实际计算结果
// 同时更新td展示和隐藏input的值
document.getElementById('total_value').textContent = totalAmount;
document.getElementById('hidden_total').value = totalAmount;

之后后端用total = request.POST.get('total')就能正常拿到值了，直接保存到数据库即可。

方案二：提交表单前手动添加数据到FormData

如果你不想额外添加隐藏元素，可以在表单提交时，手动把<td>的值添加到FormData中，再通过AJAX提交表单。

JavaScript代码示例：

// 获取表单元素
const form = document.querySelector('form');
// 监听表单提交事件
form.addEventListener('submit', function(e) {
  // 阻止默认的表单提交行为
  e.preventDefault();
  // 获取td里的总额值
  const totalValue = document.getElementById('total_value').textContent;
  // 创建FormData对象，包含表单原有数据
  const formData = new FormData(this);
  // 手动添加total值到FormData
  formData.append('total', totalValue);
  
  // 用fetch提交表单数据到后端
  fetch(form.action, {
    method: form.method,
    body: formData
  }).then(response => {
    // 这里可以处理提交后的响应，比如跳转页面或提示成功
    if (response.ok) {
      window.location.href = '/success-page/';
    }
  }).catch(error => {
    console.error('提交失败:', error);
  });
});

这种方法不需要修改HTML结构，但需要自己处理AJAX提交的逻辑，适合对表单提交有自定义需求的场景。

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