How should i implement a delete confirmation bootstrap modal before actually deleting the data (POST)?

Question

I'm a newbie and learning web development using javascript, express, node, mongoose. I wanted my app to show a delete confirmation modal using bootstrap and only delete when i click "Yes, delete".

The modal shows up but i can't get it to work properly (it deletes the wrong data - first data in mongoose instead of the one selected).

About the app: I have a page in my app that i can select a particular author. when i click the author, it will list all the blog titles that the author created. Beside each blog title is a Delete button.

I've been googling some solutions similar to my issue but i'm having no luck

<% author.blogs.forEach(function(blog) { %>  
  <form class="delete-form" action="/authors/<%= author._id%>/blogs/<%=blog._id%>?_method=DELETE" method="POST">                            
      <button type="button" class="btn btn-sm btn-danger mb-2" data-toggle="modal" data-target="#exampleModal">Delete Delete <%=blog._id%></button>

      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Confirm Delete <%= blog._id%></h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              Are you sure?
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">No, cancel</button>
              <button type="submit" class="btn btn-danger">Yes, delete</button>
            </div>
          </div>
        </div>
      </div>
  </form>
<% })%>

Assuming the author has 5 blogs and i delete one of the blogs, it should delete the correct (selected blog)

Answer 1

You should use js confirm() function instead its very simple and exactly made for this see this link to check how to use confirm function just add it in form tag like this

<form onsubmit="confirm("Are you sure you want to delete")" class="delete-form" action="/authors/<%= author._id%>/blogs/<%=blog._id%>?_method=DELETE" method="POST">                            
<button type="button" class="btn btn-sm btn-danger mb-2" data-toggle="modal" data-target="#exampleModal">Delete <%=blog._id%></button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Confirm Delete <%= blog._id%></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Are you sure?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">No, cancel</button>
        <button type="submit" class="btn btn-danger">Yes, delete</button>
      </div>
    </div>
  </div>
</div>