有没有办法将按钮的“内容”放入 PHP foreach 中的变量中？答案

【问题标题】：Is there a way to get the "contents" of a button into a variable in PHP foreach?有没有办法将按钮的“内容”放入 PHP foreach 中的变量中？
【发布时间】：2022-01-01 14:27:04
【问题描述】：

我在网站的某个部分遇到问题，用户可以点击许多按钮，基于此我需要确定他们按下了哪个按钮。有某些时间戳，他们选择保留哪个时间戳，我使用 foreach 来显示按钮，所以我不完全确定如何将其放入引导模式，但我无法做到。有任何想法吗？这是显示时间戳的部分：

<div class="container">
      <h1 class="text-center">Book for date: <?php echo date('d.m.Y', strtotime($date)); ?> </h1>
      <div class="row">
        <div class="col-md-12">
            <?php echo isset($msg)?$msg:""; ?>

        <?php
          $timeslots = timeslots($duration, $cleanup, $start, $end);
          foreach($timeslots as $ts){
          ?>
          <div class="col-md-2">
            <div class="form-group">
              <button class="btn btn-success book" data-bs-toggle="modal" data-bs-target="#myModal"><?php echo $ts ?></button>
            </div>
          </div>

        <?php }  ?>
      </div>
    </div>
  </div>

我能做些什么来弄清楚他们按下了哪个按钮而不会让它变得太乱？

【问题讨论】：

您需要使用 Javascript 使用与按钮单击事件关联的 event.target 将按钮详细信息发送到 PHP

标签： php bootstrap-modal timeslots

【解决方案1】：

下面的 sn-p 实际上不会在 Stack 上工作，但应该显示如何拦截点击事件并从中访问属性以使用您认为合适的方式。由于clickhandler 是用function 定义的而不是arrow 函数，因此您可以使用this 来引用按钮 - 或者您可以使用e.target

PHP 脚本应该可以访问 FormData 函数中定义的 post 变量 - set

document.querySelectorAll('button').forEach(bttn=>bttn.addEventListener('click',function(e){
  let url=location.href; // your php script.php perhaps
  let fd=new FormData();
      fd.set('button',this.textContent);
      fd.set('type',e.type);
      fd.set('target',e.target);
      fd.set('content',e.target.textContent);

  fetch( url, { method:'post', body:fd })
    .then(r=>r.text())
    .then(text=>{
      console.info(text)
    })
}))

<button 
  class="btn btn-success book" 
  data-bs-toggle="modal" 
  data-bs-target="#myModal">Timestamp #1</button>
  
<button 
  class="btn btn-success book" 
  data-bs-toggle="modal" 
  data-bs-target="#myModal">Timestamp #2</button>
  
<button 
  class="btn btn-success book" 
  data-bs-toggle="modal" 
  data-bs-target="#myModal">Timestamp #3</button>
  
<button 
  class="btn btn-success book" 
  data-bs-toggle="modal" 
  data-bs-target="#myModal">Timestamp #4</button>
  
<button 
  class="btn btn-success book" 
  data-bs-toggle="modal" 
  data-bs-target="#myModal">Timestamp #5</button>
  
<button 
  class="btn btn-success book" 
  data-bs-toggle="modal" 
  data-bs-target="#myModal">Timestamp #6</button>

【讨论】：