点击按钮时传递Reaction ID至表单的技术实现疑问

我来帮你一步步实现这个需求，核心思路是给每个按钮绑定对应的Reaction ID，点击时把ID赋值给表单的隐藏输入框，这样提交表单时就能带上这个值了。

步骤1：修正表单的语法错误 #

首先注意你原表单里的topicid隐藏输入标签没闭合，这会导致后续元素解析异常，先补上闭合标签：

<input type="hidden" name="topicid" value="<?php echo $actieftopicid ?>" />

步骤2：给每个「Reageer」按钮添加数据属性 #

每个按钮对应一个唯一的Reaction ID，我们需要把这个ID存在按钮的自定义属性里，同时把按钮类型从submit改成button（避免直接提交表单），方便后续JS处理：

<div class="timeline-footer">
  <button class="btn btn-primary btn-xs onderreact-btn" name="onderreact_btn" type="button" data-reaction-id="<?php echo $reactie_id; ?>">Reageer</button>
</div>

• 这里的$reactie_id是你循环渲染每个reaction时对应的ID变量，替换成你实际用的变量名即可
• 添加了onderreact-btn类名，方便JS批量选择这些按钮
• data-reaction-id用来存储当前按钮对应的Reaction ID

步骤3：设置隐藏输入框的默认值 #

按照你的需求，把onderreactieID的默认值设为0：

<input type="hidden" name="onderreactieID" value="0">

步骤4：编写JavaScript实现点击赋值 #

添加一段JS代码，监听按钮点击事件，把对应的ID赋值给隐藏输入框：

// 获取所有回复按钮和目标隐藏输入框
const reactButtons = document.querySelectorAll('.onderreact-btn');
const onderreactieInput = document.querySelector('input[name="onderreactieID"]');

// 遍历按钮绑定点击事件
reactButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 获取当前按钮的Reaction ID
    const reactionId = this.dataset.reactionId;
    // 赋值给隐藏输入框
    onderreactieInput.value = reactionId;
    // 可选：自动聚焦到评论框，提升用户体验
    document.getElementById('comment').focus();
  });
});

这里用了dataset.reactionId来读取自定义属性，比getAttribute更简洁。

步骤5：后端接收并存储ID #

最后在你的PHP插入代码里，把onderreactieID加入到插入数组中，这样就能把父级Reaction ID存入数据库了：

<?php 
if(isset($_POST['react_btn'])){ 
  unset($q1); 
  $q1['reactie'] = $app->check_string($_POST['reactie']); 
  $q1['topic_id'] = $app->check_string($_POST['topicid']); 
  $q1['klant_id'] = $app->check_string($_POST['klantid']); 
  $q1['ledenpagina_id'] = $app->check_string($_POST['ledenpaginaid']);
  // 添加这一行，接收并处理父级Reaction ID
  $q1['onderreactie_id'] = $app->check_string($_POST['onderreactieID']);
  $app->insert_query('reacties', $q1, 'id'); 
} 
?>

这样处理后，用户点击某个「Reageer」按钮时，对应的Reaction ID就会被填入表单的隐藏输入框，提交表单时就能把这个ID传递到后端，完成嵌套回复的关联存储啦。

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