macek/jquery-serialize-object

Not working correctly with certain elements

bigweld86 opened this issue · 1 comments

bigweld86 commented

If we have indexed items that belong to the same group, the form is serialized incorrectly. Let's say we have the following form:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Test</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>

  <div class="container">
  <form name="myForm" id="my-form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" name="email"class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="item[new][1][item_name]">Item</label>
    <input type="text" class="form-control" id="item[new][1][item_name]" name="item[new][1][item_name]" placeholder="">
    <input type="hidden" class="form-control" id="item[new][1][item_id]" name="item[new][1][item_id]" value="123">
  </div>
  <div class="form-group">
    <label for="item[new][2][item_name]">Item</label>
    <input type="text" class="form-control" id="item[new][2][item_name]" name="item[new][2][item_name]" placeholder="">
    <input type="hidden" class="form-control" id="item[new][2][item_id]" name="item[new][2][item_id]" value="456">
  </div>
  <div class="form-group">
    <label for="item[new][3][item_name]">Item</label>
    <input type="text" class="form-control" id="item[new][3][item_name]" name="item[new][3][item_name]" placeholder="">
    <input type="hidden" class="form-control" id="item[new][3][item_id]" name="item[new][3][item_id]" value="789">
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input">
      Check me out
    </label>
  </div>
  <button type="submit" id="submit-btn" class="btn btn-primary">Submit</button>
</form>
</div>

  <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
  <script src="./dist/jquery.serialize-object.min.js"></script>
  <script src="./scripts.js"></script>
</body>
</html>

When serializing the form, an empty element is being created for those 'grouped' inputs. So instead of getting as result:

{
   email: "asd@asd.com",
   password: "asdasda",
   item:
        {
           new:
           [
              { item_name:"item1", item_id:"123"},
              {item_name:"item2", item_id:"456"},
              {item_name:"", item_id:"789"
           ]
      }
}

We're getting:

{
   email: "asd@asd.com",
   password: "asdasda",
   item:
        {
           new:
           [
               null,
              { item_name:"item1", item_id:"123"},
              {item_name:"item2", item_id:"456"},
              {item_name:"", item_id:"789"
           ]
      }
}

Note the null item as the first element of the array.

macek commented

Start with

item[new][0][item_name]

instead of

item[new][1][item_name]