How to collect all value from HTML form?

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" : "[email protected]"}, { "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.

You're running your code on document.ready. Shouldn't it be on button click or form submit? — asprin
– asprin, Commented Jan 29, 2020 at 6:38
Also DRY, don't repeat yourself. You could cut that code to nothing using a single if in the ApplyOpeningPayloadBuilder or just use $("form").serialize — mplungjan
– mplungjan, Commented Jan 29, 2020 at 6:43
$(form).serializeArray() will do almost the exact same. The only difference being that it uses name instead of key properties. — Carsten Massmann
– Carsten Massmann, Commented Jan 29, 2020 at 7:05

mplungjan · Accepted Answer · 2020-01-29 06:58:10Z

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>

Collectives™ on Stack Overflow

How to collect all value from HTML form?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related