CODEWITHSUNDEEP
javascriptphpjqueryjsonforms
John
John

Reputation: 4991

Build JSON based on JQuery clone elements

I'm using PHP 7 (Phalcon 3), Bootstrap 3 and JQuery 3. Here is my codepen. When you click on the add button it will clone the form inline.

HTML

<div class="row form-inline">
    <div class="form-group col-xs-4">
        <label>First name</label>
        <input type="text" id="firstname" name="firstname" class="form-control">          
    </div>
    <div class="form-group col-xs-4">
        <label>Last name</label>
        <input type="text" id="lastname" name="lastname" class="form-control">          
    </div>
    <div class="form-group col-xs-4">
        <label>check</label> <br>
        <input type="checkbox" class="checkbox" name="check">
    </div>
</div>

<button type="button" class="btn btn-primary" id="btn-add">Add</button>

JS

  $("#btn-add").click(function() {
    $('.row.form-inline:last').clone(true).insertAfter('.row.form-inline:last');

    // Don't care about this, it's a checkbox library 
    $('input').iCheck({
      checkboxClass: 'icheckbox_minimal-blue',
      increaseArea: '20%',
      checked: false
    });
    $('.row.form-inline:last .checkbox').iCheck('uncheck');
    return false;
  });

So now I need to send the data to the server but I don't know how can I create a good formatted JSON through Ajax.

I'd like to create an JSON Array based on the number of created clone like this :

[
  {
    "firstname" : "John",
    "lastname" : "Doe",
    "check" : true
  },
  {
    "firstname" : "Mark",
    "lastname" : "Davidson",
    "check" : false
  },
  {
    "firstname" : "Mike",
    "lastname" : "Green",
    "check" : true
  }
]

And in my PHP script I gonna loop through this data easily. So how can I build this JSON array ?

Upvotes: 1

Views: 79

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337713

Your first issue is the duplication of id attributes, which is invalid. You can change them to classes, or remove them.

Then, based on your HTML structure, you can use map() to build the array:

var data = $('.form-inline').map(function() {
  var $container = $(this);
  return {
    firstname: $container.find('.firstname').val(),
    lastname: $container.find('.lastname').val(),
    checkbox: $container.find('.checkbox').prop('checked'),
  }
}).get();

Here's a full working example:

$("#btn-add").on('click', function() {
  $('.row.form-inline:last').clone(true).insertAfter('.row.form-inline:last');
});

$('#test').on('click', function() {
  var data = $('.form-inline').map(function() {
    var $container = $(this);
    return {
      firstname: $container.find('.firstname').val(),
      lastname: $container.find('.lastname').val(),
      checkbox: $container.find('.checkbox').prop('checked'),
    }
  }).get();
  console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row form-inline">
  <div class="form-group col-xs-4">
    <label>First name</label>
    <input type="text" name="firstname" class="form-control firstname">
  </div>
  <div class="form-group col-xs-4">
    <label>Last name</label>
    <input type="text" name="lastname" class="form-control lastname">
  </div>
  <div class="form-group col-xs-4">
    <label>check</label> <br>
    <input type="checkbox" class="checkbox" name="check">
  </div>
</div>

<button type="button" class="btn btn-primary" id="btn-add">Add</button>

<button id="test">Test</button>

Upvotes: 1

Related Questions