How do I get the the closest form data using jQuery when a child input has changed?

user_180837 0
Viewed 541

I have multiple forms in a page that contains a number of input checkboxes, when one of the form inputs change I want to collect all the parent forms data into a JSON array so I can post this somewhere.

I am struggling to get the post data into an array, I was planning to use this.closest("form").serializeObject() but this doesn't appear to work.

I get the following error:

Uncaught TypeError: this.closest(...).serializeObject is not a function

$(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 link

jquery javascript
2 Answers

That's because you're using normal vanilla javascript this. Since you're using JQuery, you should use $(this)

By using $(this), you enabled jQuery functionality for the object. By just using this, it only has generic Javascript functionality. i.e. you need $(this) for jQuery functions, but when you want to access basic javascript methods of the element that don't use jQuery, you can just use this.

So inside your function, your formData variable to

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

To keep things simple and clear, I will be using your example in the example below or click on the codepen link below.

To get the data in an array you can use .serializeArray(); or use .serializeObject();to get the data a key-value pair object depending on your choice and intention;

$(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 Link Here

user_78745320

You can try this,

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

user_89871280
Related