Как сделать идентичные формы, используя javascript

Question

У меня есть количество сообщений, отображаемых (аналогично Facebook) на веб-сайте, каждое сообщение содержит форму для разрешения ответа, как показано ниже.

<form class="is-pulled-right formElem">
<input type="hidden" name="post_id" value="{{@post.id}}">
<div class="field is-grouped">
  <p class="control is-expanded">
    <input class="input" type="text" name="comment" placeholder="Reply">
  </p>
  <p class="control">
    <input type="submit" class="button is-info" value="Reply">
  </p>
</div>

Вот javascript код, который я использую для публикации данных формы.

let replyForm = document.querySelector('.formElem');

replyForm.onsubmit = async (e) => {
    e.preventDefault();

let response = await fetch('/post/reply', {
    method: 'POST',
    body: new FormData(replyForm)
});

}

При первом представлении форма отправляется правильно в "/ post / reply" как POST. Однако при последующих представлениях данные публикуются как GET и не go в "/ post / reply". Что мне нужно сделать, чтобы каждая из форм распознавалась индивидуально?

Answer 1

вам нужно получить все элементы формы и связать событие.

let replyForms = document.querySelectorAll('.formElem');
replyForms.forEach(form => {
    form.addEventListener("submit", (e) => {
        e.preventDefault();
        let response = await fetch('/post/reply', {
            method: 'POST',
            body: new FormData(form)
        });
    })
})