Pass variable to JS and Output it in HTML

Question

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>

JS

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

But how do I solve this? I know I can do id="id_element $row['ID]" in the span, but that doesnt work for me either. — Maximilian
– Maximilian, Commented Jan 4, 2023 at 14:12
id_element $row['ID] is an invalid value for an id attribute - no spaces — user8034901
– user8034901, Commented Jan 4, 2023 at 14:14

Nisse Engström · Accepted Answer · 2023-01-04 19:37:26Z

1

When you're dealing with passing data to JavaScript via HTML elements, the best approach is to set a data-* attribute:

<span class="id_element" 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 its child element to get the id element:

<tr onclick="dialogOeffnen(this)">
  <td>
    <span class="id_element"><?=$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 to simply send the ID itself instead:

<tr onclick="dialogOeffnen('<?=$row["ID"]?>')">
  <td>
    <span class="id_element"><?=$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 you to use the same name on multiple elements.

edited Jan 4, 2023 at 19:37

Nisse Engström

4,76323 gold badges29 silver badges44 bronze badges

answered Jan 4, 2023 at 14:20

vanowm

10.4k2 gold badges29 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Maximilian Over a year ago

Thanks for that! I changed my code to your suggestions, but still cant get the ID displayed. Could you explain what to do with that "myElement.dataset.id" ? I just started coding and got no clue on JS yet... Do I need to insert the JS function you are showing to the others? Thanks for your help!

vanowm Over a year ago

@Maximilian I've updated the answer. Also, for better performance, cache elements in variables and use these variables instead of document.get* functions.

vanowm Over a year ago

Sorry, my bad, names are in german, so I was skipping reading them...updated the answer again.

vanowm Over a year ago

So, the idea behind of using data-* attributes, is that you can store data from PHP inside an element, which will be independent from information displayed on screen. And in JS in your particular case you'd use elId.dataset.id instead of elId.textContent

Maximilian Over a year ago

I think there is another issue somewhere. The Popup is still not showing up with your code. I'm wondering why, because you've done everything like in the former code to show the popup. I keep on trying. Thanks for your help

|

Collectives™ on Stack Overflow

Pass variable to JS and Output it in HTML

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related