How to display data from a table in a modal window?

Question

PHP

Good afternoon. There is a table with a link to edit data in the database. When you click on the link, a page with an edit form opens, where the fields are filled with data from the database. How to make it so that a modal window pops up with data for editing, and does not open another page with a form?

Table:

<?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
              }
              ?>

The form:

<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>

Modal window:

<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

I can offer you the following option:
1. Implement an event in jQuery that is responsible for calling the modal window using AJAX (I will show it with my example):

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. In the template or on the page where your table is located, make the following block (a modal window with data will be transferred to it, I repeat):

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

</div>

Next, we need to implement that very page of yours where you filled out the form. I usually place such pages along the path: /api/.../pageName.php (for example).
There you insert the code of your page with data, and implement the functionality that you had when editing. Not the best example, but it absolutely works.