How to receive information from a form and submit with jQuery and AJAX

Question

I'm currently stuck on how to retrieve information from a form and submit it using jQuery

I thought using serialize() would work but it doesn't place the info where I need it. Here is the API structure for submitting to a specific opening as well API link

let form = $(this);
form.serialize()

and it doesn't, but it isn't formatted correctly.

Here is the HTML structure and information I need from a user:

<div class="container">
    <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="fname">First Name <span>*</span></label>
                    <input type="text" name="candidate_first_name">
                </div>
                <div class="input-group">
                    <label for="lname">Last Name <span>*</span></label>
                    <input type="text" name="candidate_last_name">
                </div>
            </div>

            <div class="form-group">
                <div class="input-group">
                    <label for="address">Email <span>*</span></label>
                    <input type="text" name="candidate_email">
                </div>
                <div class="input-group">
                    <label for="postcode">Phone <span>*</span></label>
                    <input type="text" name="candidate_phone">
                </div>

            </div>

            <div class="form-group">
                <div class="input-group">
                    <label for="city">Resume <span>*</span></label>
                    <input class="form-control" type="file" name="resume">
                </div>

                <div class="input-group">
                    <label for="country">Prompt Question <span>*</span></label>
                    <input type="text">
                </div>

                <div class="input-group">
                    <label for="">Website Link <span>*</span></label>
                    <input type="text">
                </div>
            </div>

            <button class="submit" type="submit">Apply Now</button>

        </form>
    </div>
</div>

Here is how I'm using jQuery and Ajax to submit the form:

$(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();
  apply_for_an_opening_payload_builder.withKeyValue("candidate_first_name", "John");
  apply_for_an_opening_payload_builder.withKeyValue("candidate_last_name", "Doe");
  apply_for_an_opening_payload_builder.withKeyValue("candidate_phone", "1345454333");
  apply_for_an_opening_payload_builder.withKeyValue("candidate_email", "john@doe.com");
  apply_for_an_opening_payload_builder.withFile("resume", encoded_file, "resume.txt");
  let payload = apply_for_an_opening_payload_builder.build();

  $.ajax({
    url: 'https://jsapi.recruiterbox.com/v1/openings/367603/apply?client_name=demoaccount',
    data: JSON.stringify(payload),
    dataType: 'json',
    type: 'POST',
    success: function(response) {
      $("#json-response").html(JSON.stringify(payload));
    }
  });
});

Answer 1

Loop over the inputs and call apply_for_an_opening_payload_builder.withKeyValue appropriately.

$(".applicantForm input[type=text]").each(function() {
    apply_for_an_opening_payload_builder.withKeyValue(this.name, this.value);
});