HTML Form automatically send JSON object to API - html

Question

I have an online form from Formstack that I put on a website, and the code for the form is in HTML. However, I need to set it up so that whenever someone submits information through the form, automatically the form will send me the information (already set up) and then send the information in JSON to an API from Trulioo. The API is supposed to let me know the results.
I do not have a lot of experience in coding, but I do know that this would require some interesting code in order to make this system automated.
Can anyone help?
Here is a part of the form's code:
<div id="fsRow2312547-2" class="fsRow fsFieldRow fsLastRow">
<div class="fsRowBody fsCell fsFieldCell fsFirst fsLast fsLabelVertical
fsSpan100" id="fsCell40879974" lang="en">
<span id="label40879974" class="fsLabel fsRequiredLabel">Name<span
class="fsRequiredMarker">*</span></span>
<div class="fsSubFieldGroup">
<div class="fsSubField fsNameFirst">
<input type="text" id="field40879974-first" name="field40879974-first"
size="20" value="" required class="fsField fsFieldName fsRequired" aria-
required="true" />
<label class="fsSupporting fsRequiredLabel" for="field40879974-first">First
Name<span class="hidden">*</span></label>
</div>
<div class="fsSubField fsNameLast">
<input type="text" id="field40879974-last" name="field40879974-last"
size="20" value="" required class="fsField fsFieldName fsRequired" aria-
required="true" />
<label class="fsSupporting fsRequiredLabel" for="field40879974-last">Last
Name<span class="hidden">*</span></label>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="fsRow2312547-3" class="fsRow fsFieldRow fsLastRow">
<div class="fsRowBody fsCell fsFieldCell fsFirst fsLast fsLabelVertical
fsSpan100" id="fsCell40879975" lang="en">
<label id="label40879975" class="fsLabel fsRequiredLabel"
for="field40879975">Address<span class="fsRequiredMarker">*</span>
</label>
<label for="field40879975-address" class="hidden">Address Line 1<span
class="fsRequiredMarker">*</span></label>
<input type="text" id="field40879975-address" name="field40879975-address"
size="50" required value="" class="fsField fsFieldAddress fsRequired" aria-
required="true" />
<input type="text" id="field40879975-address2" name="field40879975-address2"
size="50" value="" style="margin-top:5px;" class="fsField fsFieldAddress2"
/>
<div class="fsSubFieldGroup">
<div class="fsSubField fsFieldCity">
<input type="text" id="field40879975-city" name="field40879975-city"
size="15" value="" required class="fsField fsFieldCity fsRequired" aria-
required="true" />
<label class="fsSupporting" for="field40879975-city">City</label>
</div>
From there Formstack (the online form company) uses some code to send the inputted information. I need it to be in JSON format like this:
{
"AcceptTruliooTermsAndConditions": true,
"Demo": true,
"ConfigurationName": "sample string 4",
"ConsentForDataSources": [
"sample string 1",
"sample string 2"
],
"CountryCode": "sample string 5",
"DataFields": {
"PersonInfo": {
"FirstGivenName": "sample string 1",
"MiddleName": "sample string 2",
"FirstSurName": "sample string 3",
"SecondSurname": "sample string 4",
"ISOLatin1Name": "sample string 5",
"DayOfBirth": 1,
"MonthOfBirth": 1,
"YearOfBirth": 1,
"MinimumAge": 1,
"Gender": "sample string 6",
"AdditionalFields": {
"FullName": "sample string 1"
}
},
"Location": {
"BuildingNumber": "sample string 1",
"BuildingName": "sample string 2",
"UnitNumber": "sample string 3",
"StreetName": "sample string 4",
"StreetType": "sample string 5",
"City": "sample string 6",
"Suburb": "sample string 7",
"County": "sample string 8",
"StateProvinceCode": "sample string 9",
"Country": "sample string 10",
"PostalCode": "sample string 11",
"AdditionalFields": {
"Address1": "sample string 1"
}
},
"Communication": {
"MobileNumber": "sample string 1",
"Telephone": "sample string 2",
"EmailAddress": "sample string 3"
etc
}
}
}

Answer 1

You'll need a Javascript file containing some code that will look like the following...
$(document).ready(function () {
var foo = $("#foo");
foo.submit(function (e) {
e.preventDefault();
var jsonData = {
"bar":$("#bar").value(),
"stuff":"another field needed by API"
};
$.ajax({
url : 'http://path.to/api/url',
dataType : 'json',
contentType : 'application/json;',
data : jsonData,
type : 'POST',
complete : handleData
});
function handleData(data) {
console.log(data);
// do whatever with response data
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="foo">
<input type="text" name="bar" id="bar" />
<input type="submit" name="baz" id="baz" />
</form>
You'll need to clarify the requirements and maybe do a lot more research with web programming...