Pass PHP variable with button to popup via javascript?

Question

I have a table created dynamically with PHP to display requests. In each row of my table there is a button to open a popup. The ID of each request should be transferred to this popup in order to read out all data.

How can I make it so that in a dynamic table (all button names are the same) each button is differentiated, or recognized which button I pressed? And how can I pass the variable from PHP to the popup via javascript?

I would appreciate any help, I've been trying for days now, but I'm not getting any results.

Here's the table view

Popup window

    <table id="meineTabelle" data-role="table" class="content"
    data-mode="columntoggle" data-column-btn-text="Spalten">
    <thead>
      <div class="tablehead">
        <tr>
          <th class="thblackborder" data-priority=""></th>
          <th class="thblackborder" data-priority="">1.Projektant</th>
          <th class="thblackborder" data-priority=""></th>
          <th class="thblackborder" data-priority="">2.Projektant</th>
          <th class="thblackborder" data-priority=""></th>
          <th class="thblackborder" data-priority="">3.Projektant</th>
          <th class="thblackborder" data-priority=""></th>
          <th class="thblackborder" data-priority="">4.Projektant</th>
          <th class="thblackborder" data-priority=""></th>
          <tr>
            <th class="">ID</th>
            <th class="">Vorname</th>
            <th class="">Nachname</th>
            <th class="">Vorname</th>
            <th class="">Nachname</th>
            <th class="">Vorname</th>
            <th class="">Nachname</th>
            <th class="">Vorname</th>
            <th class="">Nachname</th>
            <th class="">Titel</th>
            <th class="">Standort</th>
            <th class="">Klasse</th>
            <th class="">Beginn</th>
            <th class="">Abgabe</th>
            <th class="">Beschreibung</th>
            <th class="">Status</th>
            <th class="">Erstellt</th>
          </tr>
        </tr>
      </div>
      </thead>
      <tbody>
    <?php
    foreach ($Ausgabe as $row) {
    ?>
    <form>
    <tr onclick="dialogOeffnen('loslegen-dialog')">
    <td>
            <?php echo $row["ID"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Vorname"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Nachname"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Vorname2"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Nachname2"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Vorname3"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Nachname3"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Vorname4"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Nachname4"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Titel"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Standort"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Klasse"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Beginn"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Abgabe"] . "<br>"; ?>
          </td>
          <td>
            <center><a href=<?php echo "uploads/" . $FileActualName?>">Link</a></center>
          </td>
          <td>
            <?php echo $row["Genehmigt"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Erstellt"] . "<br>"; ?>
          </td>
          <td>
            <input type="button" value="" onclick="">
          </td>
      </tr>
  </form>
    <?php
    }
    ?>
      </tbody>
    </table>

Popup HTML

    <div id="body-overlay"></div>
    <div class="dialog" id="loslegen-dialog">
      <a href="#" role="button" class="dialog-schließen-button" onclick="dialogSchliessen('loslegen-dialog')">
      <i class="fas fa-times"></i>
      </a>
      <div class="textarea">
        <h1><?php echo $row['ID'] ?></h1>
      <textarea placeholder="Platz für Bemerkungen" name="Bemerkungen" id="" cols="30" rows="10"></textarea>
      </div>
      <form classaction="">
      <div class="txt_field">
            <input type="text" name="email" value="<?= $fetch_profile['email'];?>" required>
            <span></span>
            <label>E-Mail</label>
         </div>
         <div class="txt_field">
            <input type="text" name="password" required>
            <span></span>
            <label>Passwort</label>
         </div>
         <input type="submit" value="Bestätigen" name="submit">
         <div class="signup_link">
      </form>
    </div>
    <script src="dialoge.js">
    </script>
    <script>
      
    </script>
  </body>
</html>
</body>
</html>

dialoge.js

function dialogOeffnen(dialogId) {
    document.getElementById(dialogId).classList.add("sichtbar");
    document.getElementById("body-overlay").classList.add("sichtbar");
}

function dialogSchliessen(dialogId) {
    document.getElementById(dialogId).classList.remove("sichtbar");
    document.getElementById("body-overlay").classList.remove("sichtbar");
}

If I echo out $row["ID"] for sure it shows me the last ID in my table

Answer 1

First, let's clean up your HTML a bit. Tables have predetermined structures. That means that a only some elements can be used as a parent or child. For example, you can't nest a <tr> inside a another <tr> . Learn about the basics of tables .

<table id="meineTabelle" data-role="table" class="content" data-mode="columntoggle" data-column-btn-text="Spalten">
  <thead>
    <tr>
      <th>ID</th>
      <th>Vorname</th>
      <th>Nachname</th>
      <th>Vorname</th>
      <th>Nachname</th>
      <th>Vorname</th>
      <th>Nachname</th>
      <th>Vorname</th>
      <th>Nachname</th>
      <th>Titel</th>
      <th>Standort</th>
      <th>Klasse</th>
      <th>Beginn</th>
      <th>Abgabe</th>
      <th>Beschreibung</th>
      <th>Status</th>
      <th>Erstellt</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($Ausgabe as $row) : ?>
      <tr>
        <td><?= $row["ID"] ?></td>
        <td><?= $row["Vorname"] ?></td>
        <td><?= $row["Nachname"] ?></td>
        <td><?= $row["Vorname2"] ?></td>
        <td><?= $row["Nachname2"] ?></td>
        <td><?= $row["Vorname3"] ?></td>
        <td><?= $row["Nachname3"] ?></td>
        <td><?= $row["Vorname4"] ?></td>
        <td><?= $row["Nachname4"] ?></td>
        <td><?= $row["Titel"] ?></td>
        <td><?= $row["Standort"] ?></td>
        <td><?= $row["Klasse"] ?></td>
        <td><?= $row["Beginn"] ?></td>
        <td><?= $row["Abgabe"] ?></td>
        <td><a href=<?php echo "uploads/" . $FileActualName?>">Link</a></td>
        <td><?= $row["Genehmigt"] ?></td>
        <td><?= $row["Erstellt"] ?></td>
        <td>
          <button class="dialog-open" type="button" value="<?= $row["ID"] ?>">Button</button>
        </td>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

I've changed your button to a <button> element because it's a bit more flexible to use. Output the ID of the row in the value attribute. Give the button a class value to identify it with. We'll need this for JS.

Select the table in JavaScript. Listen for click events that happen within the table. The code below checks if the clicked element ( event.target ) is a button with the class we gave it. If it is, then we'll read the value from button and pass it to the open modal function.

const table = document.querySelector('#meinTabelle');

table.addEventListener('click', event => {
  if (event.target.matches('.dialog-open') {
    const dialogId = event.target.value;
    dialogOeffnen(dialogId);
  }
});

function dialogOeffnen(dialogId) {
    document.getElementById(dialogId).classList.add("sichtbar");
    document.getElementById("body-overlay").classList.add("sichtbar");
}