Как вывести данные из таблицы в модальное окно?

Question

[Mickey-D]

Добрый день. Есть таблица с ссылкой на редактирование данных в БД. При переходе по ссылке открывается страница с формой редактирования, где поля заполнены данными из БД. Как сделать так, чтобы вылазило модальное окно с данными для редактирования, а не открывалась другая страница с формой?

Таблица:

<?php

            $staff = mysqli_query($connect, "SELECT * FROM `staff`");

            $staff = mysqli_fetch_all($staff);

            foreach ($staff as $employee) {
                ?>
                   <tr><a id="toggler" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    <th class="no-copy"><?= $employee[0] ?></th>
                       <td><?= $employee[1] ?></td>
                       <td><?= $employee[3] ?></td>
                       <td><?= $employee[5] ?></td>
                       <td><?= $employee[2] ?></td>
                       <td><?= $employee[4] ?></td>
                        <td>
                        <div class="btn-group dropstart">
                        <button type="button" class="btn btn-drop" data-bs-toggle="dropdown" aria-expanded="false">
                        <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
                          <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
                        </svg>
                        </button>
                        <ul class="dropdown-menu">
                          <li><a class="btn update dropdown-item" href="php/staff/update-form.php?id=<?= $employee[0] ?>">Редактировать</a></li>
                          <li><a class="btn delete dropdown-item" href="php/staff/delete.php?id=<?= $employee[0] ?>">Удалить</a></li>
                        </ul>
                      </div>
                        </td>
                        </tr>
                <?php
              }
              ?>

Форма:

<form action="update.php" method="post">
        <input type="hidden" class="form-control" name="id" value="<?= $employee['id'] ?>">
        <p><b>ФИО</b></p>
        <input type="text" class="form-control" name="name" value="<?= $employee['name'] ?>">
        <p><b>Отдел</b></p>
        <textarea class="form-control" name="department"><?= $employee['department'] ?></textarea>
        <p><b>Должность</b></p>
        <input type="text" class="form-control" name="position" value="<?= $employee['position'] ?>">
        <p><b>Сотовый</b></p>
        <input type="tel" class="form-control" name="phone-number" value="<?= $employee['phone-number'] ?>">
        <p><b>Внутренний отдел</b></p>
        <input type="number" class="form-control" name="voip" value="<?= $employee['voip'] ?>">
        <div class="modal-footer">
        <button type="submit" class="btn btn-success">Завершить</button>
        </div>

    </form>

Модальное окно:

<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLabel">Редактирование</h4>
        </div>
        <div class="modal-body">
            
          <form action="update.php" method="post">
              <input type="hidden" class="form-control" name="id" value="<?= $employee['id'] ?>">
              <p><b>ФИО</b></p>
                <input type="text" class="form-control" name="name" value="<?= $employee['name'] ?>">
              <p><b>Отдел</b></p>
                <textarea class="form-control" name="department"><?= $employee['department'] ?></textarea>
              <p><b>Должность</b></p>
                <input type="text" class="form-control" name="position" value="<?= $employee['position'] ?>">
              <p><b>Сотовый</b></p>
                <input type="tel" class="form-control" name="phone-number" value="<?= $employee['phone-number'] ?>">
              <p><b>Внутренний отдел</b></p>
                <input type="number" class="form-control" name="voip" value="<?= $employee['voip'] ?>">
              <div class="modal-footer">
              <button type="submit" class="btn btn-success">Завершить</button>
              </div>
          </form>

        </div>
      </div>
    </div>

Answer 1

[BornTo FreeFall]

Я могу вам предложить следующий вариант:

1. Реализуете на jQuery событие, отвечающее за вызов модального окна с помощью AJAX (покажу на своем примере):

let editButton = $("#edit-button");

editButton.on('click', function () {
    let articleId = $(this).attr("article-id"); // Здесь будет храниться идентификатор записи, которую хотите отредактировать (article-id произвольное название)
    $("#genElement").load("/api/v1/article-edit.php?ID=" + articleId); // genElement - пустой блок на странице, куда будем получать модальное окно 
});
// Подробнее: https://api.jquery.com/load/

2. В шаблоне или на странице, где лежит ваша таблица делаете следующий блок (в него будет передаваться модальное окно с данными, повторюсь):

<!-- Сюда будет приходить наше модальное окно -->
<div id="genElement">

</div>

Далее, нам необходимо реализовать ту самую вашу страницу, где у вас была заполнена форма. Такие страницы обычно размещаю по пути: /api/.../pageName.php (например).

Туда вы вставляете код вашей страницы с данными, и реализуете тот функционал, который у вас был при редактировании. Не самый лучший пример, но он стопроцентно работает.