Получает значение mysql в html для отправки в файл php через jquery

Question

Я хочу получить значение id, чтобы можно было удалить данные из mysql на основе номера идентификатора

Это проект для событий, основная идея которого заключается в том, что я хочу получить номер идентификаторасобытия, основанного на нажатой кнопке, чтобы я мог обновить / удалить событие, основываясь на номере идентификатора.

Код для отображения подробностей

  <?php $sql= "SELECT event_name, event_date, event_id FROM events WHERE event_status=0";
  $result= mysqli_query($conn, $sql);?>

  while($row = mysqli_fetch_assoc($result))
{
   echo ' 

      <div class="pending-card">

        <div class="pending-image">

        </div>';

     echo "  <div class='pending-title'>
          <h1>{$row["event_name"]}</h1>
        </div>";

       echo " <div class='pending-des'>
          <p>{$row["event_date"]}</p>
          <button class='choice-pending'><a href='detail.php'>Read More...</a></button>
          <input style='display: none;' type='text' id='test-pend' value='{$row["event_id"]}'>
        </div>

      </div>
    ";
}

Код запроса

Здесь я попытался проверить, работает ли это, отправив оповещение, но после нажатия кнопки полученный номер идентификатора не соответствует кнопке, которую я нажимаю

$(document).ready(function(){

$('.choice-pending').click(function(){
    alert("Value: " +  $('#test-pend').val());

});
});

Может кто-нибудь сказать мне, где сделалЯ ошибаюсь

Например, событие, которое я нажал, должно быть 34, но предупреждение показывает 26, который является первым идентификатором события в коде для отображения подробностей

Answer 1

Вы можете использовать data - * атрибут в вашем элементе.

На основе https://www.w3schools.com/tags/att_global_data.asp

Используются атрибуты data- *для хранения пользовательских данных, приватных для страницы или приложения.

Атрибуты data- * дают нам возможность встраивать пользовательские атрибуты данных во все элементы HTML.

Сохраненные (пользовательские) данные могут затемиспользоваться в JavaScript страницы для создания более привлекательного пользовательского интерфейса (без каких-либо вызовов Ajax или запросов к базе данных на стороне сервера).

Атрибуты data- * состоят из двух частей:

Атрибутимя не должно содержать заглавных букв и должно содержать не менее одного символа после префикса «data-». Значение атрибута может быть любой строкой. Примечание. Пользовательские агенты будут полностью игнорировать пользовательские атрибуты с префиксом «data-».

<button class="choice-pending" data-event-id="<?= $row['event_id']; ?>">Read More...</button>

Тогда в вашем скрипте вы можете получить доступ к нажатой кнопке:

$(".choice-pending").click(function() {
    if($(this).attr('data-event-id') !== undefined) {
        // You can do ajax call here to your detail.php

        // Or you can simply create a hidden field inside your form, assigned the data-event-id value to it, then $("form").submit(); 

    } else {
        /** Error message here, maybe? */

    }

});

Answer 2

Сначала удалите свой якорный тег внутри кнопки и используйте только якорь или кнопку и распечатайте свой HTML-код с назначением некоторого динамического класса или идентификатора для каждого, чтобы сделать их уникальными, как это.

<div class='pending-des'>
   <p>{$row["event_date"]}</p>
   <a class='choice-pending-{$row["event_id"]}' href='detail.php'>Read More...</a>
   <input style='display: none;' type='text' id='test-pend-{$row["event_id"]}' value='{$row["event_id"]}'>
</div>

Теперь привязайте событие click кит-

$(document).ready(function(){

    $('.pending-des').each(function(){
       $(this).on('click', 'a[class^=choice-pending-]', function(){
          alert($(this).find('input[id^=test-pend-]').val());
       });

   });

});