Pass variable to JS and Output it in HTML-CodePudding

if got a dynamic generated table (php foreach) that has an id it. I want to pass the ID of the clicked row to a JS function and output it inside a popup. The Popup also opens by clicking on the selected row.

Input from HTML

                <form>
                    <tr onclick="dialogOeffnen('loslegen-dialog')">
                    <td>
                      <span id="id_element"><?php echo $row["ID"];?></span><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>
                          <span id="title_element"><?php echo $row["Titel"];?></span><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>
                    </tr>
                </form>

document.getElementById("dialog_title").innerText = document.getElementById("id_element").innerText;
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");
}

Output here

<div  id="loslegen-dialog">
   <a href="#" role="button"  onclick="dialogSchliessen('loslegen-dialog')">
    <i ></i>
   </a>
   <div >
   <h1 id="dialog_title"></h1>

My suggestion was, giving the span of the ID an id="id_element" and pass it to JS. However the output does only display the first ID of my table no matter which row im clicking.

CodePudding user response：

When you're dealing with passing data to javascript via html elements, best approach is to set an `data-*" attribute:

<span  data-id="<?=$row['ID']?>">this is my ID: <?=$row["ID"]?></span><br>

And in javascript you can simply access it via myElement.dataset.id

In your case instead of sending a name of an element to your function, you can send the row element itself, and simply search for it's child element to get the id element:

<tr onclick="dialogOeffnen(this)">
  <td>
    <span ><?=$row["ID"]?></span><br>
  </td>

const elBodyOverlay = document.getElementById("body-overlay"),
      elDialogTitle = document.getElementById("dialog_title"),
      elLoslegenDialog = document.getELementById("loslegen-dialog");

function dialogOeffnen(elRow) {
    //find our "id" element
    const elId = elRow.querySelector(".id_element");
    //display ID in the popup
    elDialogTitle.innerText = elId.textContent;
    //open popup
    elLoslegenDialog.classList.add("sichtbar");
    elBodyOverlay.classList.add("sichtbar");
}

However, a better solution is simply send the ID itself instead:

<tr onclick="dialogOeffnen('<?=$row["ID"]?>')">
  <td>
    <span ><?=$row["ID"]?></span><br>
  </td>

const elBodyOverlay = document.getElementById("body-overlay"),
      elDialogTitle = document.getElementById("dialog_title"),
      elLoslegenDialog = document.getELementById("loslegen-dialog");

function dialogOeffnen(id) {
    //display ID
    elDialogTitle.innerText = id;
    //open popup
    elLoslegenDialog.classList.add("sichtbar");
    elBodyOverlay.classList.add("sichtbar");
}

Note that <span> changed attribute id to class, this allows use the same name on multiple elements