CODEWITHSUNDEEP
jqueryhtml
Dan Scally
Dan Scally

Reputation: 2042

serializeArray() into an array is not producing expected output

I have multiple forms on a page and I'm trying to use jquery to build the inputs from those forms into one JSON structure to POST. Let's say it looks like this:

function submitData() {
  var serializedData = []
  var forms = $("form");

  forms.each(function(i) {
    serializedData.push({
      i: $(this).serializeArray()
    });
  });

  console.log(serializedData);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Learner</th>
      <th scope="col">Date</th>
      <th scope="col">Period</th>
      <th scope="col">Subject</th>
      <th scope="col">Teacher</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <form>
      <tr>
        <th scope="row">1</th>
        <td><input type="text" name="learner"></td>
        <td><input type="date" name="date"></td>
        <td><input type="text" name="period"></td>
        <td><input type="text" name="subject"></td>
        <td><input type="text" name="staff"></td>
        <td><button type="button">Delete</button></td>
      </tr>
    </form>
    <form>
      <tr>
        <th scope="row">1</th>
        <td><input type="text" name="learner"></td>
        <td><input type="date" name="date"></td>
        <td><input type="text" name="period"></td>
        <td><input type="text" name="subject"></td>
        <td><input type="text" name="staff"></td>
        <td><button type="button">Delete</button></td>
      </tr>
    </form>
    <form>
      <tr>
        <th scope="row">1</th>
        <td><input type="text" name="learner"></td>
        <td><input type="date" name="date"></td>
        <td><input type="text" name="period"></td>
        <td><input type="text" name="subject"></td>
        <td><input type="text" name="staff"></td>
        <td><button type="button">Delete</button></td>
      </tr>
    </form>
  </tbody>
</table>

<button type="button" onclick="submitData()">Submit Data</button>

What I'm trying to do is build JSON from the form values. This correctly builds the structure I'm looking for but weirdly only populates data from the first form. I.E. I get this:

[{
  "i": [{
    "name": "learner",
    "value": "My Name"
  }]
},{
  "i":  []
}]

Why might it skip the data from the second (and subsequent) forms, but work as I expect for the first one?

Upvotes: 1

Views: 46

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The problem is because your HTML is invalid. You cannot have form elements as the child of a tbody. If you inspect the DOM you'll see that the form elements have been moved and now have no content, hence the empty output from serializeArray().

To make this work you would need to put the form outside the table, although this in turn means you cannot have multiple form elements around each row. If you need the latter, you cannot use a table for this layout.

Upvotes: 1

Related Questions