Как получить значение кнопок в PHP foreach l oop в Javascript - PullRequest
Новая
       11

Как получить значение кнопок в PHP foreach l oop в Javascript

0 голосов
/ 01 мая 2020

Я работаю над очень простым веб-приложением для социальных сетей, чтобы практиковать PHP & Ajax. Пользователи получают предложения друзей, и когда они отправляют запрос, я хочу, чтобы получатель получил небольшое уведомление, используя Ajax.

Кнопка запроса находится в foreach l oop, например: 

<?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, когда я нажимаю «Добавить» определенного пользователя c, я пробовал это: 

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

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

, но это только первый журнал предложенный идентификатор приятеля (только при нажатии первой кнопки); консоль остается пустой, когда я добавляю второго или третьего предложенного друга. Я предполагаю, что мне придется использовать a для l oop, но когда я попытался добавить его, он ничего не напечатал бы.

1 Ответ

0 голосов
/ 01 мая 2020

Чтобы назначить прослушиватель событий 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), и просто имеете отдельную кнопку для каждой записи / предложения, которой назначена необходимая информация в виде dataset атрибуты. 

<?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 );
    });
});
...