title: How to collect all value from HTML form?
body: <p>I'm currently trying to use jQuery to collect information from a HTML form, but I'm stuck.
  Every time I console.log <code>payload</code> its empty and didn't capture the input values.</p>
  
  <p>Questions:</p>
  
  <ul>
  <li><p>Why is <code>payload</code> empty at the end, after I input values into the form?
  how to correct it?</p></li>
  <li><p>Should I use document.ready for this or window.onload?</p></li>
  </ul>
  
  <p>Please any help is appreciated.</p>
  
  <p>Here is my last attempt jQuery:</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() {
  
    const ApplyOpeningPayloadBuilder = function() {
  
      let payload = {
        "fields": []
      };
  
      return {
        withKeyValue: function(key, value) {
          let param = {};
          param.key = key;
          param.value = value;
          payload.fields.push(param);
          return this;
        },
        withFile: function(key, encoded_data, filename) {
          let value = {};
          value.encoded_data = encoded_data;
          value.file_name = filename;
          this.withKeyValue(key, value);
          return this;
        },
        build: function() {
          return payload;
        }
      }
    }
    let encoded_file = "aGVsbG8gd29ybGQ=";
    let apply_for_an_opening_payload_builder = new ApplyOpeningPayloadBuilder();
  
    $(".applicantForm input[type=text]").each(function() {
      apply_for_an_opening_payload_builder.withKeyValue(this.name, this.value);
    });
  
    $(".applicantForm input[type=email]").each(function() {
      apply_for_an_opening_payload_builder.withKeyValue(this.name, this.value);
    });
  
    $(".applicantForm input[type=tel]").each(function() {
      apply_for_an_opening_payload_builder.withKeyValue(this.name, this.value);
    });
  
    $(".applicantForm input[type=url]").each(function() {
      apply_for_an_opening_payload_builder.withKeyValue(this.name, this.value);
    });
  
  
    apply_for_an_opening_payload_builder.withFile("resume", encoded_file, "resume.txt");
  
    let payload = apply_for_an_opening_payload_builder.build();
  
    console.log("Log payload:", payload)
  
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container" id="json-response"&gt;
    &lt;div class="form-container"&gt;
      &lt;div class="header"&gt;
        &lt;h1&gt;Application form&lt;/h1&gt;
      &lt;/div&gt;
      &lt;form action="#" class="applicantForm"&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="input-group"&gt;
            &lt;label for="First Name"&gt;First Name &lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input type="text" name="First Name"&gt;
          &lt;/div&gt;
          &lt;div class="input-group"&gt;
            &lt;label for="Last Name"&gt;Last Name &lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input type="text" name="Last Name"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="input-group"&gt;
            &lt;label for="Email"&gt;Email &lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input type="email" name="Email"&gt;
          &lt;/div&gt;
          &lt;div class="input-group"&gt;
            &lt;label for="Phone"&gt;Phone &lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input type="tel" name="Phone"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="input-group"&gt;
            &lt;label for="Resume"&gt;Resume &lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input class="form-control" type="file" name="Resume"&gt;
          &lt;/div&gt;
          &lt;div class="input-group"&gt;
            &lt;label for="LinkedIn Profile"&gt;LinkedIn Profile&lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input type="url" name="LinkedIn Profile"&gt;
          &lt;/div&gt;
          &lt;div class="input-group"&gt;
            &lt;label for="Website link"&gt;Website Link &lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input type="url" name="Website link"&gt;
          &lt;/div&gt;
          &lt;div class="input-group"&gt;
            &lt;label for="In lieu of a cover letter, please tell us more about why you are interested in joining the Compass Fellowship?"&gt; In lieu of a cover letter, please tell us more about why you are interested in joining the Compass Fellowship?&lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input type="text" name="In lieu of a cover letter, please tell us more about why you are interested in joining the Compass Fellowship?"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;button class="submit" type="submit"&gt;Apply Now&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the structure of how the <code>payload</code> object should look like in the end:</p>
  
  <pre><code>let payload = {
    "fields": [
      { "key" : "candidate_first_name", "value" : "John"},
      { "key" : "candidate_last_name", "value" : "Doe"},
      { "key" : "candidate_email", "value" : "john.doe@gmail.com"},
      { "key" : "candidate_phone", "value" : "1234567890"},
      { "key" : "resume", "value": {
        "encoded_data" : "aGVsbG8gd29ybGQ=",
        "file_name" : "resume.txt"
        }
      }
    ]
  };
  </code></pre>
  
  <p>Note the payload structure is from this <a href="http://apiv1.recruiterbox.com/frontend_api.html#get-application-form-fields-of-a-opening" rel="nofollow noreferrer">link</a>, specifically the "Apply for a Opening" section.</p>