Как получить нужный документ из коллекции MongoDB в js код с помощью _id?

Question

На странице .ejs отображаются некоторые данные из коллекции БД. Код укорочен и используется только id и nameEvent.
Нажимая на кнопку "Buy" я передаю id одного из документов, который в дальнейшем хочу изменить.
Вместо того, чтобы получить id выбранного документа я всегда получаю последний документ из коллекции. Как сделать так, чтобы выбирался конкретный элемент?

$(document).ready(function() {
      $(".sendRequest").click(function() {
            var id = '<%-events._id%>'
            console.log("Var from .ejs form: " + id); // Тут всегда получается последний документ коллекции.
          };

<!--Укороченная версия кода-->
<ul>
  <% for (var events of event){ %>
    <!--Пытаюсь получить все докементы Events из БД-->
    <li>
      <!--Далее отображаются все документы отображаются. У кажфого документа есть id-->
      <form id="<%=events._id%>" class="eventForm" method="post" action="/bookedEvent">
        <input type="text" placeholder="<%=events._id%>">
        <!---->
        <input type="text" id="nameEvent" name="nameEvent" placeholder="<%=events.nameEvent%>" readonly>
        <!--Этот же id я передаю с помощью button-->
        <button id="<%=events._id%>" type="button" class="sendRequest">Buy</button>
      </form>
    </li>
    <% } %>
</ul>

                                    readonly>

Answer 1

Как сделать так, чтобы выбирался конкретный элемент?

Для этого нужно:

Привести в порядок разметку страницы, удалив дублирование id
Использовать другой подход к обработке клика и работе с данными страницы

Например вот так можно получать нужные id разных форм.

$('.sendRequest').on('click', e => {
  e.preventDefault()
  const o = e.target.closest('.eventForm')
  console.log(o.id)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>
      <form id="id_1" class="eventForm" method="post" action="/bookedEvent">
        <input type="text" />
        <input type="text" id="nameEvent" name="nameEvent" readonly />
        <button type="button" class="sendRequest">Buy</button>
      </form>
    </li>
    <li>
      <form id="id_2" class="eventForm" method="post" action="/bookedEvent">
        <input type="text" />
        <input type="text" id="nameEvent" name="nameEvent" readonly />
        <button type="button" class="sendRequest">Buy</button>
      </form>
    </li>
    <li>
      <form id="id_3" class="eventForm" method="post" action="/bookedEvent">
        <input type="text" />
        <input type="text" id="nameEvent" name="nameEvent" readonly />
        <button type="button" class="sendRequest">Buy</button>
      </form>
    </li>
</ul>

БЛОГ НА HUSL

Как получить нужный документ из коллекции MongoDB в js код с помощью _id?

Ответы (1 шт):