Javascript - исключить все, что находится вне определенного тега формы

Question

У меня есть страница с обзорами ресторанов, и у каждого отзыва есть кнопка «Мне нравится». Каждая кнопка находится внутри тега формы, который имеет скрытые поля ввода идентификатора просмотра и идентификатора пользователя. Проблема в том, что когда я отправляю форму, все внутри и снаружи определенного тега формы на этой странице передается на сервер, и я не знаю, какой отзыв понравился для обновления базы данных и интерфейса. Можно ли как-то отправить данные только внутри тега формы? Спасибо.

Тег формы, каждый отзыв будет иметь такую ​​форму

<form style="padding-top: 5px;" onsubmit="ajax_helpful_vote()">
    <input type="hidden" name="user_id" value="<%= user._id %>">
    <input type="hidden" name=<%= review._id %> value="<%= review._id %>">
    <button type="submit" class="btn btn-primary" id=<%= review._id %>>
       <span class="glyphicon glyphicon-thumbs-up"></span> Helpful
    </button>
</form>

функция ajax для отправки данных на сервер

function ajax_helpful_vote(form_id) {
    event.preventDefault();
    var formArray= $("#"+form_id).serializeArray();
    var data={};
    for (var index in formArray){
        data[formArray[index].name]= formArray[index].value;
    }

    $.ajax({
        url: '/helpful_vote' ,
        data: data,
        dataType: 'json',
        type: 'POST',
        success: function (dataR) {
            // disable helpful button
            document.getElementById(dataR.liked_review_id.toString()).disabled = true;
            // update number of votes
            $('#' + dataR.liked_review_id.toString() + "-text").prepend("You and ");
        },
        error: function (xhr, status, error) {
            console.log('Error: ' + error.message);
        }
    });
}

Я пытался присвоить форме имя / идентификатор и в функции ajax получить данные этой формы, используя имя / идентификатор, но он перенаправляет меня на страницу, на которой есть параметры полей ввода и не отправляются никакие данные. на заднем плане. Это означает, что функция ajax никогда не запускается, поэтому она перезагружает страницу методом get по умолчанию.

<% }else{
var text_id = review._id + "-text";
var form_id = review._id + "-form";
 %>
 <p style="color: green; padding-top: 5px" id=<%= text_id %>><%= review.liked_by.length %> people find this review helpful</p>
 <form id="<%=form_id%>" style="padding-top: 5px;" onsubmit="ajax_helpful_vote(<%=form_id.toString()%>)">
   <input type="hidden" name="user_id" value="<%= user._id %>">
   <input type="hidden" name=<%= review._id %> value="<%= review._id %>">
   <button type="submit" class="btn btn-primary" id=<%= review._id %>>
      <span class="glyphicon glyphicon-thumbs-up"></span> Helpful
   </button>
 </form>

Визуализированный тег формы

Answer 1

Форма отправляется немедленно. Вот почему вызов AJAX не сработал. Вы должны предотвратить отправку формы в первую очередь. Поскольку вы используете jQuery, есть простой способ.

Удалите обработчик onsubmit из HTML вашей формы и привяжите его с помощью обработки событий jQuery:

$('form').submit(function(e) {
  e.preventDefault();
  ajax_helpful_vote();
})

function ajax_helpful_vote() {
  ...
}

Кроме того, удалите последнюю строку event.preventDefault(); из функции ajax_helpful_vote, что приведет к ошибке, поскольку event не будет определено там.

Answer 2

Я понял это, так что проблема не в функции, а в том, как идентификатор формы передается в функцию. Вместо onsubmit="ajax_helpful_vote(<%=form_id.toString()%>)" у меня должен быть onsubmit="ajax_helpful_vote('<%=form_id.toString()%>')". Это должна быть одинарная кавычка вместо двойной кавычки.

Answer 3

Попробуйте установить id в форме, затем var formArray= $("form#some_id").serializeArray();

Чтобы продемонстрировать, как это работает:

function ajax_helpful_vote(event) {
    event.preventDefault();
    var formArray= $("form").serializeArray();
    console.log(formArray)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="outside" value="outside"></input>
<form id="myForm" style="padding-top: 5px;" onsubmit="ajax_helpful_vote(event)">
    <input type="hidden" name="user_id" value="user_test"/>
    <input type="hidden" name=name1"/>
    <button type="submit" class="btn btn-primary"
       <span class="glyphicon glyphicon-thumbs-up"></span> Helpful
    </button>
</form>