Как получить данные ближайшей формы, используя jQuery, когда дочерний ввод изменился?

Question

У меня есть несколько форм на странице, которая содержит несколько флажков ввода, при изменении одного из входов формы я хочу собрать все данные родительских форм в массив JSON, чтобы я мог опубликовать это где-нибудь.

Я изо всех сил пытаюсь получить данные публикации в массиве, я планировал использовать this.closest("form").serializeObject(), но это не сработало.

Я получаю следующую ошибку:

Uncaught TypeError: this.closest (...). SerializeObject не является функцией

$(document).ready(function() {
  console.log("jquery ready!");

  $('form input:checkbox').change(function() {
    var jsonArray;
    var formData = this.closest("form").serializeObject();
    console.log(formData);

  });

});

<form action="http://myurl.com/1" id="form-1">
  <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label>
  <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label>

</form>
<form action="http://myurl.com/2" id="form-2">
  <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label>
  <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label>

</form>
<form action="http://myurl.com/3" id="form-3">
  <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label>
  <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label>
</form>

Ссылка на CodePen

Answer 1

Это потому, что вы используете обычную ваниль javascript this. Поскольку вы используете JQuery, вы должны использовать $(this)

. Используя $(this), вы включили функциональность jQuery для объекта. Просто используя this, он имеет только общие функции c Javascript. т.е. вам нужен $ (this) для jQuery функций, но если вы хотите получить доступ к базовым c javascript методам элемента, которые не используют jQuery, вы можете просто использовать this.

Итак, внутри вашей функции ваша переменная formData должна быть

var formData = $(this).closest("form").serializeObject();

Чтобы все было просто и понятно, я буду использовать ваш пример в приведенном ниже примере или щелкнуть ссылку codepen ниже.

Чтобы получить данные в массиве, вы можете использовать .serializeArray(); или .serializeObject();, чтобы получить данные как объект пары ключ-значение, в зависимости от вашего выбора и намерения;

$(document).ready(function() {
  console.log("jquery ready!");

  $("form input:checkbox").change(function() {
    var jsonArray;
    var formData = $(this).closest("form").serializeObject();
    console.log(formData);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="http://myurl.com/1" id="form-1">
  <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label>
  <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label>
</form>

<form action="http://myurl.com/2" id="form-2">
  <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label>
  <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label>
</form>

<form action="http://myurl.com/3" id="form-3">
  <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label>
  <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label>
</form>

Ссылка на CodePen здесь

Answer 2

Вы можете попробовать это,

$(document).ready(function() {
   var formObj = {};
   $('form input:checkbox').change(function() {     
        let form = $(this).closest("form");
        formObj[form.attr('id')] = {};
        form.serializeArray().forEach(function(elem){
            formObj[form.attr('id')][elem.name] = elem.value;
        });
        console.log(formObj);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="http://myurl.com/1" id="form-1">
    <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label>
    <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label>
</form>
<form action="http://myurl.com/2" id="form-2">
    <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label>
    <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label>
</form>
<form action="http://myurl.com/3" id="form-3">
    <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label>
    <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label>    
</form>