Как я должен реализовать модальное подтверждение начальной загрузки удаления перед фактическим удалением данных (POST)?

Question

Я новичок и изучаю веб-разработку с использованием javascript, express, node, mongoose.Я хотел, чтобы мое приложение показывало модал подтверждения удаления с помощью начальной загрузки и удалял только тогда, когда я нажимал «Да, удалить».

Модал появляется, но я не могу заставить его работать должным образом (он удаляет неправильные данные - первые данные в mongoose вместо выбранных).

О приложении: у меня естьстраница в моем приложении, которую я могу выбрать конкретного автора.когда я нажимаю на автора, он перечисляет все заголовки блога, которые автор создал.Рядом с заголовком каждого блога есть кнопка Удалить.

Я пытался найти некоторые решения, похожие на мою проблему, но мне не повезло

<% 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>
<% })%>

Предполагается, что у автора есть 5 блогов и яудалить один из блогов, он должен удалить правильный (выбранный блог)

Answer 1

Вы должны использовать функцию js confirm(), вместо этого, она очень проста и точно сделана для этого, посмотрите эту ссылку, чтобы проверить , как использовать функцию подтверждения , просто добавьте ее в тег формы, как этот

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