如何从 HTML 表单中收集所有值？

Question

I'm currently trying to use jQuery to collect information from a HTML form, but I'm stuck. Every time I console.log payload its empty and didn't capture the input values.

Questions:

• Why is payload empty at the end, after I input values into the form? how to correct it?

• Should I use document.ready for this or window.onload?

Please any help is appreciated.

Here is my last attempt jQuery:

 $(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) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container" id="json-response"> <div class="form-container"> <div class="header"> <h1>Application form</h1> </div> <form action="#" class="applicantForm"> <div class="form-group"> <div class="input-group"> <label for="First Name">First Name <span>*</span></label> <input type="text" name="First Name"> </div> <div class="input-group"> <label for="Last Name">Last Name <span>*</span></label> <input type="text" name="Last Name"> </div> </div> <div class="form-group"> <div class="input-group"> <label for="Email">Email <span>*</span></label> <input type="email" name="Email"> </div> <div class="input-group"> <label for="Phone">Phone <span>*</span></label> <input type="tel" name="Phone"> </div> </div> <div class="form-group"> <div class="input-group"> <label for="Resume">Resume <span>*</span></label> <input class="form-control" type="file" name="Resume"> </div> <div class="input-group"> <label for="LinkedIn Profile">LinkedIn Profile<span>*</span></label> <input type="url" name="LinkedIn Profile"> </div> <div class="input-group"> <label for="Website link">Website Link <span>*</span></label> <input type="url" name="Website link"> </div> <div class="input-group"> <label for="In lieu of a cover letter, please tell us more about why you are interested in joining the Compass Fellowship?"> In lieu of a cover letter, please tell us more about why you are interested in joining the Compass Fellowship?<span>*</span></label> <input type="text" name="In lieu of a cover letter, please tell us more about why you are interested in joining the Compass Fellowship?"> </div> </div> <button class="submit" type="submit">Apply Now</button> </form> </div> </div>

Here is the structure of how the payload object should look like in the end:

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"
      }
    }
  ]
};

Note the payload structure is from this link , specifically the "Apply for a Opening" section.

Answer 1

You are running all the code at once ( document.ready() ), instead you need to run it inside form submit , like $('.applicantForm').on('submit', function(e){}) . Check the updated fiddle

 var $ = jQuery; $(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="; $('.applicantForm').on('submit', function(e) { e.preventDefault(); 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); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="container" id="json-response"> <div class="form-container"> <div class="header"> <h1>Application form</h1> </div> <form action="#" class="applicantForm"> <div class="form-group"> <div class="input-group"> <label for="First Name">First Name <span>*</span></label> <input type="text" name="First Name"> </div> <div class="input-group"> <label for="Last Name">Last Name <span>*</span></label> <input type="text" name="Last Name"> </div> </div> <div class="form-group"> <div class="input-group"> <label for="Email">Email <span>*</span></label> <input type="email" name="Email"> </div> <div class="input-group"> <label for="Phone">Phone <span>*</span></label> <input type="tel" name="Phone"> </div> </div> <div class="form-group"> <div class="input-group"> <label for="Resume">Resume <span>*</span></label> <input class="form-control" type="file" name="Resume"> </div> <div class="input-group"> <label for="LinkedIn Profile">LinkedIn Profile<span>*</span></label> <input type="url" name="LinkedIn Profile"> </div> <div class="input-group"> <label for="Website link">Website Link <span>*</span></label> <input type="url" name="Website link"> </div> <div class="input-group"> <label for="In lieu of a cover letter, please tell us more about why you are interested in joining the Compass Fellowship?"> In lieu of a cover letter, please tell us more about why you are interested in joining the Compass Fellowship?<span>*</span></label> <input type="text" name="In lieu of a cover letter, please tell us more about why you are interested in joining the Compass Fellowship?"> </div> </div> <button class="submit" type="submit">Apply Now</button> </form> </div> </div>