JavaScript：如何获取折叠面板按钮值传入表单并存入MySQL数据库

嘿，我来帮你搞定这个问题！核心问题其实是折叠面板的按钮本身不是表单提交时会自动携带数据的控件——之前用可见的输入框时，它是标准表单元素，提交时会把值传给后端，但按钮不一样，默认不会把它的内容/值提交到数据库。下面是具体的解决步骤：

1. 添加隐藏的表单输入框 #

在你的表单内部加一个隐藏的<input>标签，专门用来存储折叠按钮的Day值，这样表单提交时后端就能拿到这个值了：

<!-- 放在你的表单内部，和文本框同级即可 -->
<input type="hidden" name="day_value" id="hidden_day_input">

2. 给折叠按钮绑定点击事件，传递Day值 #

当用户点击折叠面板的按钮时，把按钮上的Day值（不管是按钮文本、自定义属性还是value值）赋值给刚才的隐藏输入框。这里分两种常见场景：

场景A：按钮的Day值就是按钮显示的文本（比如按钮上写着“Day 1”） #

假设你的折叠按钮HTML是这样的：

<button class="collapse-btn">Day 1</button>

用JavaScript绑定点击事件：

// 给所有折叠按钮绑定点击逻辑
document.querySelectorAll('.collapse-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取按钮的文本内容（比如"Day 1"）
    const dayText = this.textContent.trim();
    // 把值赋值给隐藏输入框
    document.getElementById('hidden_day_input').value = dayText;
    // 这里执行你的折叠面板展开逻辑
    // ...（比如切换面板的display属性）
  });
});

场景B：用data-*属性存储Day值（更规范的做法） #

推荐用data-day属性来存Day值，这样不管按钮文本怎么修改，数据都不会出错：

<button class="collapse-btn" data-day="Day 1">点击展开Day 1面板</button>

对应的JavaScript逻辑：

document.querySelectorAll('.collapse-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取自定义data-day属性的值
    const dayValue = this.getAttribute('data-day');
    document.getElementById('hidden_day_input').value = dayValue;
    // 执行折叠面板展开逻辑
    // ...
  });
});

3. 后端接收参数调整 #

确保你的后端代码（不管是PHP、Java、Python还是其他语言）接收的参数名和隐藏输入框的name属性一致——比如上面的day_value，然后把这个值存入MySQL对应的字段里。

额外检查点 #

• 确认隐藏输入框确实在<form>标签内部，不然表单提交时不会携带它的值。
• 点击按钮后，可以打开浏览器开发者工具（F12），在Elements面板里查看隐藏输入框的value是否已经正确赋值，快速排查前端问题。
• 如果用的是jQuery或其他前端框架，写法可以调整，但核心逻辑都是把按钮的Day值存入隐藏表单控件，再通过表单提交传递给后端。

这样调整后，用户点击折叠按钮展开面板，再提交文本框内容时，隐藏输入框里的Day值就会和文本框内容一起被提交到后端，顺利存入数据库啦！

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