title: Create JSON from form fields - jQuery
body: <p>What I am trying to do is to create a JSON from html form. Then to use this script (Formulator -  <a href="https://github.com/walpolea/Formulator" rel="nofollow noreferrer">https://github.com/walpolea/Formulator</a>) to visualize it.</p>
  <p>I can use <code>serializeArray()</code> 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.</p>
  <pre><code>{
     &quot;custom1&quot;:&quot;some value&quot;,
     &quot;custom2&quot;:&quot;some value&quot;,
     &quot;inputs&quot;:[
        {
           &quot;label&quot;:{
              &quot;content&quot;:&quot;Input: &quot;,
              &quot;class&quot;:&quot;inputLabel&quot;
           },
           &quot;id&quot;:&quot;first_name&quot;,
           &quot;name&quot;:&quot;first_name&quot;,
           &quot;type&quot;:&quot;text&quot;,
           &quot;size&quot;:&quot;50&quot;
        },
        {
           &quot;label&quot;:{
              &quot;content&quot;:&quot;Select: &quot;,
              &quot;class&quot;:&quot;inputLabel&quot;
           },
           &quot;id&quot;:&quot;FirstSelect&quot;,
           &quot;name&quot;:&quot;FirstSelect&quot;,
           &quot;type&quot;:&quot;select&quot;,
           &quot;options&quot;:[
              {
                 &quot;value&quot;:&quot;One&quot;
              },
              {
                 &quot;value&quot;:&quot;Two&quot;
              }
           ]
        },
        {
           &quot;label&quot;:{
              &quot;content&quot;:&quot;Checkboxes: &quot;,
              &quot;class&quot;:&quot;inputLabel&quot;
           },
           &quot;id&quot;:&quot;checkbox&quot;,
           &quot;name&quot;:&quot;somevalue&quot;,
           &quot;type&quot;:&quot;checkbox&quot;,
           &quot;options&quot;:[
              {
                 &quot;value&quot;:&quot;Dog&quot;,
                 &quot;name&quot;:&quot;pet&quot;
              },
              {
                 &quot;value&quot;:&quot;Cat&quot;,
                 &quot;name&quot;:&quot;pet&quot;
              },
              {
                 &quot;value&quot;:&quot;Bird    &quot;,
                 &quot;name&quot;:&quot;pet&quot;
              }
           ]
        },
        {
           &quot;id&quot;:&quot;submit&quot;,
           &quot;name&quot;:&quot;submit&quot;,
           &quot;type&quot;:&quot;submit&quot;,
           &quot;value&quot;:&quot;Submit&quot;
        }
     ]
  }
  </code></pre>
  <p>My problem comes in the <code>&quot;inputs&quot;:[]</code> 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.</p>
  <p><strong>Here is DEMO:</strong> <a href="https://jsfiddle.net/largan/avz672s4/71/" rel="nofollow noreferrer">https://jsfiddle.net/largan/avz672s4/71/</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
          $('#submit').on('click', function () {
              $('#result').html('');
                  $('#result').append(
                      $('&lt;pre&gt;').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('[]') &gt; 0) {
                              if (!$.isArray(data[field.name])) {
                                  data[field.name] = new Array();
                                  data['type'] = 'select';
                              }
                              for (let i = 0; i &lt; field.selectedOptions.length; i++) {
                                  data[field.name].push(field.selectedOptions[i].value);
                              }
                          } else {
                              data[field.name] = field.value;
                data['type'] = 'input';
                          }
                      }
              });
              return data
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Convert form to JSON&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt; &lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"&gt; &lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt; &lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery-1.11.3.js"&gt; &lt;/script&gt;
      &lt;script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"&gt; &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
    &lt;h2&gt;Form to JSON&lt;/h2&gt;
    &lt;p&gt;&lt;/p&gt;
    &lt;form id="form"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="first_name" class="inputLabel"&gt;Input:&lt;/label&gt;
        &lt;input type="text" name="first_name" id="first_name" class="form-control" size="50"&gt;
        &lt;br&gt;
        &lt;label for="select" class="inputLabel"&gt;Select:&lt;/label&gt;
        &lt;select multiple class="form-control" id="FirstSelect" name="FirstSelect[]" size="2"&gt;
          &lt;option&gt;One&lt;/option&gt;
          &lt;option&gt;Two&lt;/option&gt;
        &lt;/select&gt;
        &lt;br&gt;
        &lt;label for="select" class="inputLabel"&gt;Select:&lt;/label&gt;
        &lt;select multiple class="form-control" id="SecondSelect" name="SecondSelect[]" size="3"&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
        &lt;/select&gt;
        &lt;br&gt;
        &lt;label for="pet" class="inputLabel"&gt;Checkboxes:&lt;/label&gt;
  
  &lt;div class="form-check-inline"&gt;
        &lt;input type="checkbox" id="checkbox[]" name="pet" value="Dog" /&gt; Dog 
        &lt;/div&gt;
  &lt;div class="form-check-inline"&gt;
        &lt;input type="checkbox" id="checkbox[]" name="pet" value="Cat" /&gt; Cat 
        &lt;/div&gt;
  &lt;div class="form-check-inline"&gt;
        &lt;input type="checkbox" id="checkbox[]" name="pet" value="Bird" /&gt; Bird 
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;button id="submit" name="submit" type="submit"  class="btn btn-primary"&gt;Submit&lt;/button&gt;
  
    &lt;/form&gt;
  
  &lt;p&gt;&lt;/p&gt;
    &lt;div class="alert alert-info" id="result" &gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What I want to achieve is to create the required JSON once I click on Submit</p>