CODEWITHSUNDEEP
javascriptphpwhile-loop
Praveen Kumar
Praveen Kumar

Reputation: 59

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

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.

Upvotes: 0

Views: 166

Answers (2)

mplungjan
mplungjan

Reputation: 178161

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>";

Upvotes: 2

Quentin
Quentin

Reputation: 943759

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

Upvotes: 2

Related Questions