Submit form data as JSON

Question

I have to recreate a form that was originally created using Jotform - it is here . I am struggling in one area. It is a pretty simple form, the only caveat being the ability to duplicate a form field form multiple entries. That part can be seen here . When the form is duplicated, I need to submit the form data as a JSON array. In the fiddle, I didn't put the regular form fields, here is how they and the cloned field need to submit the data.

q2_fullName[first]:test
q2_fullName[last]:test
q1_currentCommission1:[{"Instruments":"a","Commissions":"1","Margins":"a"},{"Instruments":"b","Commissions":"2","Margins":"b"},{"Instruments":"c","Commissions":"3","Margins":"c"}]

normally in my $.ajax handler, I just serialize the data, but that doesn't work in creating the json array for the cloned fields. Normally like so:

submitHandler: function(form) {
  var dataString = $(form).serialize(); 
  $.ajax({
    type:'POST',
    url: form.action,
    data: dataString,
    dataType: "json",
    beforeSend: function(data){
     //before send
    },
    success: function(data){
      //success function
    }
  });
  return false;
},

I need to somehow serialize the non cloned fields (I think) and create a json array out of the cloned values and assign them a key name

Answer 1

You can build the post data and the json string like this :

var data = {
      // get/set the firstname etc
      "q2_fullName":{
          "first":"", // get firstname ie $("#first_2").val(),
          "last":"" 
      },
      "q1_currentCommission1" :""
    },
    commisions = [];

$('.InsContain').each(function() {
  var $inputs = $(this).find('input');
  commisions.push({
    "Instruments" : $inputs.eq(0).val(),
    "Commissions" : $inputs.eq(1).val(),
    "Margins" : $inputs.eq(2).val()
  });
});
data.q1_currentCommission1 = JSON.stringify(commisions);

Posted data :

q2_fullName[first]:aaa
q2_fullName[last]:123
q1_currentCommission1:[{"Instruments":"1","Commissions":"1","Margins":"1"}]

Update fiddle here