json.serializeArray, not including arrayed elements-CodePudding

I am getting a really wired issue while using the serializeArray on form submit via ajax.

Here is any example of my code:

console.log($('form').serializeArray());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<form action="..." method="post">
  <input type="text" name="title" value="input value">

  <select name="select_one" id="select_one">
    <option value="1">Select 1 - 1</option>
    <option value="2" selected>Select 1 - 2</option>
    <option value="3">Select 1 - 3</option>
  </select>

  <select name="select_two[]" id="select_two[]" multiple="multiple">
    <option value="1" selected>Select 2 - 1</option>
    <option value="2" selected>Select 2 - 2</option>
    <option value="3">Select 2 - 3</option>
  </select>

  <select name="select_three[]" id="select_three[]" multiple="multiple">
    <option value="1" selected>Select 3 - 1</option>
    <option value="2" selected>Select 3 - 2</option>
    <option value="3">Select 3 - 3</option>
  </select>

  <input type="text" name="mobile" value="1234567890">
</form>

Output

{
    "title": "input value",
    "select_one": 2,
    "mobile": 1234567890
}

Whereas it should have been

{
    "title": "input value",
    "select_one": 2,
    "select_two": [1, 2],
    "select_three": [1, 2],
    "mobile": 1234567890
}

All the elements except the arrayed ones are collected.

I have tried googling this issue but could not find any solution.

CodePudding user response：

If the output shown in the question is your goal, then serializeArray() is not the correct method to achieve it. That returns an array of objects with each object containing one value per field. It doesn't return not a single object containing string/array values as your goal requires.

To do what you need you will have to build the object manually:

$('form').on('submit', e => {
  e.preventDefault();
  
  const output = {};
  $(e.target).find(':input[name]').each((i, el) => output[el.name] = $(el).val());
  
  console.log(output);
  
  // ajax request here...
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<form action="..." method="post">
  <input type="text" name="title" value="input value">

  <select name="select_one" id="select_one">
    <option value="1">Select 1 - 1</option>
    <option value="2" selected>Select 1 - 2</option>
    <option value="3">Select 1 - 3</option>
  </select>

  <select name="select_two[]" id="select_two[]" multiple="multiple">
    <option value="1" selected>Select 2 - 1</option>
    <option value="2" selected>Select 2 - 2</option>
    <option value="3">Select 2 - 3</option>
  </select>

  <select name="select_three[]" id="select_three[]" multiple="multiple">
    <option value="1" selected>Select 3 - 1</option>
    <option value="2" selected>Select 3 - 2</option>
    <option value="3">Select 3 - 3</option>
  </select>

  <input type="text" name="mobile" value="1234567890">
  
  <button type="submit">Submit</button>
</form>