PHP Js Only first row of the table can be use(button)

Question

Im new at this and still confuse about my problem, so here is a table for my php

<table>
            <tr>
                <th align="center">ID</th>
                <th align="center">Project Name</th>
                <th align="center">Due Date</th>
                <th align="center">Sub Date</th>
                <th align="center">Comment</th>
                <th align="center">Status</th>
                <th align="center">Option</th>
            </tr>

            <tr>
            
            <?php
                
                while ($res2=mysqli_fetch_assoc($result2)) {

                    echo "<tr>";
                    echo "<td>".$res2['project_id']."</td>";
                    echo "<td>".$res2['project_name']."</td>";
                    echo "<td>".$res2['duedate']."</td>";
                    echo "<td>".$res2['subdate']."</td>";
                    echo "<td>\"".$res2['comment']."\"</td>";
                    echo "<td>".$res2['status']."</td>";
                    
                    //as you can see, id = myId
                    echo "<td><a href=\"#\" id=\"myId\" class=\"button\">View</a>";
                }?>
                </td>
            </tr>
        </table>

supposedly when button next to each row is clicked, a popup window will appear but only the first row works, and the other buttons do nothing. I did search for this problem like 2 hours already, most of them talk about unique id, but how can I implement or fix for this problem.

Here is a script for this

        document.getElementById('myId').addEventListener("click", function () {
            document.querySelector('.bg-modal').style.display = "flex";
        });

I would really appreciate for your help, thanks a lot.

An id is supposed to be Unique, yours are not so the js only sees the first one — RiggsFolly
– RiggsFolly, Commented Oct 24, 2021 at 14:44

Dhana D. · Accepted Answer · 2021-10-24 14:44:13Z

1

Firstly, you should just use unique ID for every HTML elements, if you intend to create multiple elements with same behavior, use class instead.

After you change it to class, you can select all the elements work by assigning once by using querySelectorAll().

Here is the working example:

document.querySelectorAll('button.click').forEach(elem => 
{
  elem.addEventListener('click', () => {
    document.querySelector('div').style.background = elem.innerText;
  });
});

div {
  width: 200px;
  height: 200px;
}

<button id="1" class="click">green</button>
<button id="2" class="click">blue</button>
<div></div>

answered Oct 24, 2021 at 14:44

Dhana D.

1,7424 gold badges15 silver badges41 bronze badges

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

Comments

im dev · Accepted Answer · 2021-10-24 14:41:08Z

0

you can try:

[].slice.call(document.querySelectorAll('[id^="myId"]'))
.map(el => el.addEventListener("click", function () {
    document.querySelector('.bg-modal').style.display = "flex";
}));

and you should change your code:

 $i = 0;
 while ($res2=mysqli_fetch_assoc($result2)) {
     ......
     //as you can see, 
     echo "<td><a href=\"#\" class=\"class-{++$i}\" class=\"button\">View</a>";
 }

now, js code:

[].slice.call(document.querySelectorAll('[class^="class-"]'))
.map(el => el.addEventListener("click", function () {
    document.querySelector('.bg-modal').style.display = "flex";
}));

answered Oct 24, 2021 at 14:41

im dev

896 bronze badges

4 Comments

Average Person Over a year ago

Thank you, this one working great, I have another question if you mind to answer..my problem now is I want to pass value id(in while loop) to be use and call outside of that loop, for example "project_id" is what I selected on the table, and I want to call all the data within the database base on the id which is project_id..but whenever i clicked any of the row in table, always the last one being called because I know that while loop process and ended up on the last row so the id also assigned as the last value..is there any way I can overcome this problem? (*Im sorry for bad english)

im dev Over a year ago

you can try: echo "<td><a data-projid="{$projectid}" href=\"#\" class=\"class-{++$i}\" class=\"button\">View</a>"; in js code can use: el.dataset['projid'] =>>> project id

Average Person Over a year ago

im sorry but how im supposed to put el.dataset['projid'] =>>> project id ?

im dev Over a year ago

it's here:

.slice.call(document.querySelectorAll('[class^="class-"]')) .map(el => {     console.log(el.dataset['projid']);     el.addEventListener("click", function () {         document.querySelector('.bg-modal').style.display = "flex";     } }));

Dave Vermette · Accepted Answer · 2021-10-24 17:10:09Z

Ids should be unique. You should not use twice the same id in a page. Classes serves that purpose.

So first, we should add a class on every buttons that tells us that this button is used to show the modal. And we also remove the id, as it would not be unique and is also useless here.

echo "<td><a href=\"#\" class=\"modal-button button\">View</a>";

Then, to add the listener, we want to target every buttons that has this new “modal-button” we just added. The right way to do so, would be to target elements with the class, iterate over them and add the listener.

document.getElementsByClassName(‘modal-button’).forEach(button => {

    button.addEventListener("click", function () {
        document.querySelector('.bg-modal').style.display = "flex";
    });

})

Hopefully this helps!

Collectives™ on Stack Overflow

PHP Js Only first row of the table can be use(button)

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related