如何在表单提交时自动生成并POST二进制季节字符串至数据库

前端实现（自动生成二进制字符串） #

1. 在表单中添加12个月份复选框，给它们统一类名并标记月份顺序，同时新增一个隐藏输入框用于存储生成的二进制字符串：

<form id="month-form" method="POST" action="/submit">
  <!-- 月份复选框组 -->
  <div class="month-group">
    <label><input type="checkbox" class="month-checkbox" data-month="1"> 1月</label>
    <label><input type="checkbox" class="month-checkbox" data-month="2"> 2月</label>
    <label><input type="checkbox" class="month-checkbox" data-month="3"> 3月</label>
    <label><input type="checkbox" class="month-checkbox" data-month="4"> 4月</label>
    <label><input type="checkbox" class="month-checkbox" data-month="5"> 5月</label>
    <label><input type="checkbox" class="month-checkbox" data-month="6"> 6月</label>
    <label><input type="checkbox" class="month-checkbox" data-month="7"> 7月</label>
    <label><input type="checkbox" class="month-checkbox" data-month="8"> 8月</label>
    <label><input type="checkbox" class="month-checkbox" data-month="9"> 9月</label>
    <label><input type="checkbox" class="month-checkbox" data-month="10"> 10月</label>
    <label><input type="checkbox" class="month-checkbox" data-month="11"> 11月</label>
    <label><input type="checkbox" class="month-checkbox" data-month="12"> 12月</label>
  </div>
  <!-- 其他表单字段示例 -->
  <input type="text" name="item_name" placeholder="项目名称" required>
  <!-- 隐藏字段：存储生成的12位二进制字符串 -->
  <input type="hidden" name="season" id="season-input">
  <button type="submit">提交表单</button>
</form>

2. 监听表单提交事件，在提交前完成二进制字符串生成并赋值给隐藏字段：

const form = document.getElementById('month-form');
const seasonInput = document.getElementById('season-input');
const monthCheckboxes = document.querySelectorAll('.month-checkbox');

form.addEventListener('submit', (e) => {
  // 按1-12月的顺序排序复选框，确保二进制位对应关系正确
  const sortedCheckboxes = Array.from(monthCheckboxes).sort((a, b) => 
    parseInt(a.dataset.month) - parseInt(b.dataset.month)
  );

  // 生成二进制字符串：选中为'1'，未选中为'0'
  let binaryStr = '';
  sortedCheckboxes.forEach(checkbox => {
    binaryStr += checkbox.checked ? '1' : '0';
  });

  // 强制补全为12位，避免前导零丢失
  binaryStr = binaryStr.padStart(12, '0');

  // 将生成的字符串赋值给隐藏字段，随表单提交
  seasonInput.value = binaryStr;
});

后端处理（SQLite存储） #

以Python Flask为例，直接接收POST请求中的字符串并插入数据库（season字段已改为VARCHAR类型）：

from flask import Flask, request
import sqlite3

app = Flask(__name__)

@app.route('/submit', methods=['POST'])
def submit_form():
    # 获取表单数据
    item_name = request.form.get('item_name')
    season_str = request.form.get('season')  # 直接接收12位字符串，比如'001100110011'

    # 连接SQLite数据库并插入数据
    conn = sqlite3.connect('your_db.db')
    cursor = conn.cursor()
    cursor.execute(
        'INSERT INTO your_table (item_name, season) VALUES (?, ?)',
        (item_name, season_str)
    )
    conn.commit()

    cursor.close()
    conn.close()
    return '提交成功'

if __name__ == '__main__':
    app.run(debug=True)

关键注意事项 #

• 复选框顺序：必须按1-12月排序生成字符串，否则月份与二进制位的对应关系会混乱。
• 前导零保证：使用padStart(12, '0')强制字符串长度为12位，彻底解决前导零丢失问题。
• 数据库字段：保持season字段为VARCHAR类型，直接存储字符串，无需转换为整数。

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