title: Serialize HTML form to JSON with pure JavaScript
body: <p>I have seen this method of serializing a form to JSON and it's working fine. My question is: How can I achieve this with pure JavaScript, without using any jQuery code? I am sorry if the question is dumb, but I'm still learning so if anyone can help me, I'll be grateful.</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>(function ($) {
      $.fn.serializeFormJSON = function () {
  
          var objects = {};
          var anArray = this.serializeArray();
          $.each(anArray, function () {
              if (objects[this.name]) {
                  if (!objects[this.name].push) {
                      objects[this.name] = [objects[this.name]];
                  }
                  objects[this.name].push(this.value || '');
              } else {
                  objects[this.name] = this.value || '';
              }
          });
          return objects;
      };
  })(jQuery);
  
  $('form').submit(function (e) {
      e.preventDefault();
      var data = $(this).serializeFormJSON();
      console.log(data);
  
      /* Object
          email: "value"
          name: "value"
          password: "value"
       */
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form action="#" method="post"&gt;
      &lt;div&gt;
          &lt;label for="name"&gt;Name&lt;/label&gt;
          &lt;input type="text" name="name" id="name" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label for="email"&gt;Email&lt;/label&gt;
          &lt;input type="text" name="email" id="email" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label for="password"&gt;Password&lt;/label&gt;
          &lt;input type="password" name="password" id="password" /&gt;
      &lt;/div&gt;
      &lt;p&gt;
          &lt;input type="submit" value="Send" /&gt;
      &lt;/p&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>P.S.
  Also in jQuery is this the right way to send multiple JSON objects from user input as One String, because I am searching for a way to do that?</p>