How to open a modal with a button for every data from the foreach loop?

user_10712472 0
Viewed 886

I get Comments for a post (on a blog I'm coding) with a foreach loop.

If an admin is logged in they get an 'x'-Button next to every comment to delete them.

When the button is clicked it should open a Modal in which the admin has to confirm he wants to delete the comment.

The Problem is: Right now only the first Button opens the Modal and I don't know why since I know exactly nothing when it comes to javascript, I did my script from a little tutorial about modal boxes.

This is the code of the site itself and the script of it:

<?php if(isset($_SESSION['admin']) && $_SESSION['admin'] == true): ?>
  <button id="delete-btn" class="delete-button">x</button>
<?php endif;?>
  <div id="delete-modal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
       <p class="modal-text"> Are you sure you want to delete this comment?
        <br /><br /> You will not be able to undo this.</p>
         <form method="post" action="post?id=<?php echo e($post['id']);?>">
          <div class="confirmation-delete">
           <a href="delete-comment?id=<?php echo e($comment->id); ?>" name="delete-comment">delete comment<a/>
          </div>
         </form>
     </div>
   </div>


<script>
  var modal = document.getElementById('delete-modal');
  var btn = document.getElementById("delete-btn");
  var span = document.getElementsByClassName("close")[0];

  btn.onclick = function() {
    modal.style.display = "block";
  }
  span.onclick = function() {
    modal.style.display = "none";
  }
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>

When I click on the button next to the first comment the modal opens, but if I click the button next to the following comments it doesn't.

I don't know what's wrong or how to get it working, I hope anyone can help me with this.

modal-dialog foreach php javascript
2 Answers

The problem is that You only targetting the button with ID delete-btn and ID's are unique for every element in HTML. When to attach the onClick method on that it is only targetting the first button with that ID hence only the first time the modal is opening. You need to target the buttons with class. You can achieve this using The addEventListener() method. Go to link to read more about it https://www.w3schools.com/js/js_htmldom_eventlistener.asp

TIP : You can easily do that using jQuery.

user_68322010

Please check below mentioned solution and update your code accordingly. Let me know if it not work.

$(document).ready(function(){
  $('.delete-button').click(function(){
    $('#delete-modal').modal('show');
  });
  $('.delete-comment,.close').click(function(e){
    e.preventDefault();
    $('#delete-modal').modal('hide');
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  <button id="delete-btn" class="delete-button">x</button>
  <button id="delete-btn" class="delete-button">x</button>
  <button id="delete-btn" class="delete-button">x</button>
  <button id="delete-btn" class="delete-button">x</button>
  <button id="delete-btn" class="delete-button">x</button>
  
  <div id="delete-modal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
       <p class="modal-text"> Are you sure you want to delete this comment?
        <br /><br /> You will not be able to undo this.</p>
         <form method="post" action="post?id">
          <div class="confirmation-delete">
           <a href="delete-comment" class="delete-comment" name="delete-comment">delete comment<a/>
          </div>
         </form>
     </div>
   </div>

user_14418220
Related