Create JSON from form fields - jQuery

Question

What I am trying to do is to create a JSON from html form. Then to use this script (Formulator - https://github.com/walpolea/Formulator) to visualize it.

I can use serializeArray() to export values and names to JSON. However, for the Formulator to work, I have to create the JSON with a specific structure that looks like this.

{
   "custom1":"some value",
   "custom2":"some value",
   "inputs":[
      {
         "label":{
            "content":"Input: ",
            "class":"inputLabel"
         },
         "id":"first_name",
         "name":"first_name",
         "type":"text",
         "size":"50"
      },
      {
         "label":{
            "content":"Select: ",
            "class":"inputLabel"
         },
         "id":"FirstSelect",
         "name":"FirstSelect",
         "type":"select",
         "options":[
            {
               "value":"One"
            },
            {
               "value":"Two"
            }
         ]
      },
      {
         "label":{
            "content":"Checkboxes: ",
            "class":"inputLabel"
         },
         "id":"checkbox",
         "name":"somevalue",
         "type":"checkbox",
         "options":[
            {
               "value":"Dog",
               "name":"pet"
            },
            {
               "value":"Cat",
               "name":"pet"
            },
            {
               "value":"Bird    ",
               "name":"pet"
            }
         ]
      },
      {
         "id":"submit",
         "name":"submit",
         "type":"submit",
         "value":"Submit"
      }
   ]
}

My problem comes in the "inputs":[] section of that JSON. I can't figure out how to do it. Also, in the case of a select element, it has to take all the options instead of only the selected one. The same is valid also for the checkboxes.

Here is DEMO: https://jsfiddle.net/largan/avz672s4/71/

$(document).ready(function() {
        $('#submit').on('click', function () {
            $('#result').html('');
                $('#result').append(
                    $('').text(JSON.stringify(_get_values($('#form')), null, 2))
      )
      event.preventDefault();
                });
            });
function _get_values(form)
        {
            let data = {
      "custom1":"some value",
        "custom2":"some value"
      };
            $(form).find('input, textarea, select').each(function(x, field) {

                    if (field.name) {
                        if (field.name.indexOf('[]') > 0) {
                            if (!$.isArray(data[field.name])) {
                                data[field.name] = new Array();
                                data['type'] = 'select';
                            }
                            for (let i = 0; i < field.selectedOptions.length; i++) {
                                data[field.name].push(field.selectedOptions[i].value);
                            }
                        } else {
                            data[field.name] = field.value;
              data['type'] = 'input';
                        }
                    }
            });
            return data
        }



    Convert form to JSON
    
    
    
    
    
    
    
    



  Form to JSON
  
  
    
      Input:
      
      

      Select:
      
      

      Select:
      
      

      Checkboxes:


       Dog 
      

       Cat 
      

       Bird

What I want to achieve is to create the required JSON once I click on Submit

Swati · Accepted Answer

You first need to check if the input is there inside json array then create new JSON Object using {} and add value to that JSON Object using yourjsonname["value"]="something" do same to other values as well . Now, to loop through all checkboxes you need use some loop and then use $(this).val() to push this value to your json which is created before same do for select-box .

Demo Code :

$(document).ready(function() {
  $('#submit').on('click', function() {
    $('#result').html('');
    $('#result').append(
      $('').text(JSON.stringify(_get_values($('#form')), null, 2))
    )
    event.preventDefault();
  });
});

function _get_values(form) {
  let dataa = {
    "custom1": "some value",
    "custom2": "some value"
  };
  //create input json array
  dataa['input'] = new Array();

  $(form).find('input, textarea, select').each(function(x, field) {

    if (field.id) {
      if (field.id.indexOf('[]') > -1) {
        //check if the input exist inside json array
        var existss = $(dataa.input)
          .filter(function(i, n) {
            return n.id === field.id;
          });
        //if not exist
        if (typeof existss[0] == 'undefined') {
          var label = {}; //for label
          var data = {}; //for other data
          data['type'] = field.type;
          data['name'] = field.name;
          data['id'] = field.id;
          data["options"] = new Array();
          if (field.type == "select-multiple") {

            ///add value for label and option
            label["content"] = $(this).prev("label").attr("for")
            label["class"] = $(this).prev("label").attr("class")
            for (let i = 0; i < field.length; i++) {
              var option_inside = {}; //create json object
              option_inside["value"] = field[i].value;
              data["options"].push(option_inside) //push in main array
            }
          }
          if (field.type == "checkbox") {
            //add value for checkeboxs and labl
            label["content"] = $(this).closest("div").prev("label").attr("for")
            label["class"] = $(this).closest("div").prev("label").attr("class")

            $("input[name=" + field.name + "]").each(function() {
              var option_inside = {}; //create json objct
              option_inside["value"] = $(this).val();
              option_inside["name"] = field.name;
              data["options"].push(option_inside) //push option in main array(options)
            })

          }
          data["label"] = label //add label created
          dataa['input'].push(data) //finally push created json to main json array

        }

      } else {
        //add value and label 
        var label = {};
        label["content"] = $(this).prev("label").attr("for")
        label["class"] = $(this).prev("label").attr("class")
        var data = {}
        data["label"] = label
        data[field.name] = field.name;
        data['type'] = 'input';
        data['id'] = field.id;
        data['size'] = field.size;
        dataa['input'].push(data)
      }
    }
  });
  return dataa
}




  Convert form to JSON
  
  
  
  
  
  
  
  



  
    Form to JSON
    
    
      
        Input:
        
        

        Select:
        
        

        Select:
        
        


        Checkboxes:

        
           Dog
        
        
           Cat
        
        
           Bird

Create JSON from form fields - jQuery

Answers (1)

Related Questions