如何在 Javascript 中的 PHP foreach 循环中获取按钮的值答案

【问题标题】：How to get value of buttons in a PHP foreach loop in Javascript如何在 Javascript 中的 PHP foreach 循环中获取按钮的值
【发布时间】：2020-08-16 01:36:06
【问题描述】：

我正在开发一个非常简单的社交媒体 web 应用程序来练习 PHP 和 Ajax。用户收到一些朋友建议，当他们发送请求时，我希望收件人使用 Ajax 获得一点通知。

请求按钮在 foreach 循环中，如下所示：

<?php foreach ($suggestions as $suggestion) : ?>
   [...]
   <form action="" method="post" id="formRequest">
      <input type="hidden" name="userID" class="userID" value="<?php echo $userID ?>">
      <input type="hidden" name="buddyID" class="buddyID" value="<?php echo $suggestion['userID'] ?>">
      <input type="submit" value="Add as friend" name="request" class="request">
   </form>

为了测试当我单击“添加”特定用户时 Ajax 是否获得正确的 buddyID 值，我尝试了以下方法：

let request = document.querySelector(".request");

   request.addEventListener("click", function() {
      let buddyID = document.querySelector(".buddyID").value;
      console.log(buddyID);
   })

但这只会记录第一个建议好友的 ID（所以只有当我点击第一个按钮时）；当我添加第二个或第三个建议的好友时，控制台保持空白。我的猜测是我必须使用 for 循环，但是当我尝试添加一个时，它根本不会打印任何内容。

【问题讨论】：

为了让收件人通过 Ajax 获得通知，您需要经常轮询。您可以考虑Server Sent Events 或websockets，而不是这样做。至于问题本身 - 事件侦听器没有为所有按钮注册，只有一个。使用 querySelectorAll 之类的东西来查找按钮列表并将侦听器分配给每个按钮
顺便说一句，您不能重复元素 ID，因此您应该将其从表单中删除。当您打算使用 AJAX 时，根本不需要表单 - 一系列按钮（每条记录一个）具有自定义 dataset 属性，例如 data-buddy 或 data-user ）与事件侦听器一起使用

标签： javascript php ajax foreach

【解决方案1】：

为了将click 事件侦听器分配给所有按钮，而不仅仅是分配给一个按钮，您可以尝试使用querySelectorAll 来查找您迭代的节点列表。

Array.from( document.querySelectorAll( 'input[type="submit"].request' ) ).forEach( bttn=>{
    bttn.addEventListener('click',(e)=>{
        e.preventDefault();

        let buddyID=e.target.parentNode.querySelector('.buddyID').value;
        let userID=e.target.parentNode.querySelector('.userID').value;

        console.info( buddyID, userID );
    });
});

您可以通过删除表单来进一步简化事情（如果您使用 AJAX，这些表单无论如何都不会做任何事情）并且只需为每个记录/建议设置一个单个按钮，该按钮以 @ 的形式分配必要的信息987654324@属性。

<?php
    foreach( $suggestions as $suggestion ) { 
?>

    <input class="request" type='button' data-buddyID="<?php echo $suggestion['userID'];?>" data-userID="<?php echo $userID;?>" value="Add as friend" />

<?php
    }
?>



Array.from( document.querySelectorAll( 'input[type="button"].request' ) ).forEach( bttn=>{
    bttn.addEventListener('click',function(e){
        e.preventDefault();

        let buddyID=this.dataset.buddyID;
        let userID=this.dataset.userID;

        console.info( buddyID, userID );
    });
});

【讨论】：