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(
                    $('<pre>').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
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Convert form to JSON</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script>
    <script src="https://code.jquery.com/jquery-1.11.3.js"> </script>
    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"> </script>
</head>
<body>
<div class="container">
  <h2>Form to JSON</h2>
  <p></p>
  <form id="form">
    <div class="form-group">
      <label for="first_name" class="inputLabel">Input:</label>
      <input type="text" name="first_name" id="first_name" class="form-control" size="50">
      <br>
      <label for="select" class="inputLabel">Select:</label>
      <select multiple class="form-control" id="FirstSelect" name="FirstSelect[]" size="2">
        <option>One</option>
        <option>Two</option>
      </select>
      <br>
      <label for="select" class="inputLabel">Select:</label>
      <select multiple class="form-control" id="SecondSelect" name="SecondSelect[]" size="3">
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <br>
      <label for="pet" class="inputLabel">Checkboxes:</label>

<div class="form-check-inline">
      <input type="checkbox" id="checkbox[]" name="pet" value="Dog" /> Dog 
      </div>
<div class="form-check-inline">
      <input type="checkbox" id="checkbox[]" name="pet" value="Cat" /> Cat 
      </div>
<div class="form-check-inline">
      <input type="checkbox" id="checkbox[]" name="pet" value="Bird" /> Bird 
      </div>
    </div>
      <button id="submit" name="submit" type="submit"  class="btn btn-primary">Submit</button>

  </form>

<p></p>
  <div class="alert alert-info" id="result" ></div>

</div>

</body>
</html>

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

Swati · Accepted Answer · 2020-11-11 15:19:51Z

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(
      $('<pre>').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
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Convert form to JSON</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
  </script>
  <script src="https://code.jquery.com/jquery-1.11.3.js">
  </script>
  <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js">
  </script>
</head>

<body>
  <div class="container">
    <h2>Form to JSON</h2>
    <p></p>
    <form id="form">
      <div class="form-group">
        <label for="first_name" class="inputLabel">Input:</label>
        <input type="text" name="first_name" id="first_name" class="form-control" size="50">
        <br>
        <label for="select" class="inputLabel">Select:</label>
        <select multiple class="form-control" id="FirstSelect[]" name="FirstSelect[]" size="2">
          <option>One</option>
          <option>Two</option>
        </select>
        <br>
        <label for="select" class="inputLabel">Select:</label>
        <select multiple class="form-control" id="SecondSelect[]" name="SecondSelect[]" size="3">
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
        <br>

        <label for="pet" class="inputLabel">Checkboxes:</label>

        <div class="form-check-inline">
          <input type="checkbox" id="checkbox[]" name="pet" value="Dog" /> Dog
        </div>
        <div class="form-check-inline">
          <input type="checkbox" id="checkbox[]" name="pet" value="Cat" /> Cat
        </div>
        <div class="form-check-inline">
          <input type="checkbox" id="checkbox[]" name="pet" value="Bird" /> Bird
        </div>
      </div>
      <button id="submit" name="submit" type="button" class="btn btn-primary">Submit</button>

    </form>

    <p></p>
    <div class="alert alert-info" id="result"></div>

  </div>

</body>

</html>

Wow, thank you very much. It's exactly what I wanted to achieve and you explained it very well.

Collectives™ on Stack Overflow

Create JSON from form fields - jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related