HTML-Formular automatisch JSON-Objekt an API senden

Question

Ich habe ein Online-Formular von Formstack, dass ich auf eine Website gestellt habe, und der Code für das Formular ist in HTML. Allerdings muss ich es so einrichten, dass, wenn jemand Informationen über das Formular einreicht, das Formular automatisch die Informationen (bereits eingerichtet) sendet und dann die Informationen in JSON an eine API von Trulioo sendet. Die API soll mir die Ergebnisse mitteilen.

Ich habe nicht viel Erfahrung in der Codierung, aber ich weiß, dass dies einige interessante Code erfordern würde, um dieses System zu automatisieren.

Kann jemand helfen?

Hier ist ein Teil des Codes des Form:

<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> 

Von dort Formstack (die Online-Formular Firma) verwendet einigen Code, um die eingegebenen Informationen zu senden. Ich brauche es, wie dies im JSON-Format sein:

{ 
    "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

Sie erhalten eine Javascript-Datei benötigen einen Code enthält, der wie folgt ...

$(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>

aussehen Sie müssen die Anforderungen klären und vielleicht viel mehr Forschung mit Web-Programmierung ...