How to get the value of while loop(PHP) using JavaScript?

Question

I have this while loop in PHP

<?php
while ($row = mysqli_fetch_assoc($getPosts)) {
  $post_id = $row['post_id'];                  


 echo "<td><a rel='$post_id' id='get_post_id' 
 onclick='active_del_modal()'>Delete</a></td>";

}   
?>

In this loop, when we click on the "delete" link, the value of variable "$post_id" changes. I want to get the value of "$post_id" when it changes. I tried with this JS code

function active_del_modal() { 
  var x = document.getElementById("get_post_id").getAttribute("rel");
  alert(x);
}

But it only gives me the last value of "$post_id". I want to get each value of "$post_id" when it changes and this value should be individual, not like this 23 46 545 545, etc. I don't want to use any framework like jQuery.

@TheCodesee I know how to do this in jQuery but I want to learn how to do this without jQuery. — Praveen Kumar
– Praveen Kumar, Commented Jun 12, 2020 at 18:13
@PraveenKumar Might be easier if you post your working jQuery and then we can help 'switch' it to vanilla JS — The Codesee
– The Codesee, Commented Jun 12, 2020 at 18:14
Also do not re-user id in a loop. IDs need to be unique. You can use a class instead — mplungjan
– mplungjan, Commented Jun 12, 2020 at 18:19

Quentin · Accepted Answer · 2020-06-12 18:17:29Z

An ID must be unique in a document. So stop using static IDs in a loop.
Links go somewhere. Don't use a link if you aren't navigating. Use a button if you want something to click on to trigger JS. Apply CSS if you don't like the default appearance of a button.
A post ID is not a type of relationship. Don't abuse rel attributes. (Appropriate use would be something like <a href="page2.html" rel="next">) Use a data-* attribute if you need to associate custom data with an element.
Intrinsic event attributes have a bunch of gotchas associated with them. Don't use them. Use addEventListener and friends instead.

function active_del_modal(event) {
  const button = event.target;
  const id = button.dataset.postId;
  console.log({
    id
  });
}

document.querySelector("#delete-buttons").addEventListener("click", active_del_modal);

button {
  border: none;
  background: none;
  colour: blue;
  cursor: pointer;
}

button:hover {
  text-decoration: underline;
}

<ul id="delete-buttons">
  <li><button type="button" data-post-id="$post_id">Delete</button></li>
  <li><button type="button" data-post-id="foo">Delete</button></li>
  <li><button type="button" data-post-id="bar">Delete</button></li>
</ul>

mplungjan · Accepted Answer · 2020-06-12 18:21:38Z

Method 1 - minimum change

onclick='active_del_modal(this)'

and you can use

function active_del_modal(link) { 
  var x = link.getAttribute("rel");
  alert(x);
}

Method 2 - better:

window.addEventListener("load",function() {
  document.querySeletor("table").addEventListener("click",function(e) {
    const tgt = e.target, rel = tgt.getAttribute("rel");
    if (rel) alert(rel);
  })
})

I recommend using data-attributes instead of rel:

If you change id to class, you can do this

window.addEventListener("load",function() {
  document.querySeletor("table").addEventListener("click",function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("get_post_id")) {
      const id = tgt.dataset.id;
      console.log(id);
    }
  })
})

using

echo "<td><a data-id='$post_id' class='get_post_id'>Delete</a></td>";

LASTLY if the link is supposed to delete the row, you can do

window.addEventListener("load",function() {
  document.querySeletor("table").addEventListener("click",function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("delete")) {
      tgt.closest("tr").remove();
    }
  })
})

using

echo "<td><button type="button" class='delete'>Delete</button></td>";

Collectives™ on Stack Overflow

How to get the value of while loop(PHP) using JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related