HTMLフォームから自動的にJSONオブジェクトがAPIに送信されます

Question

Formstackのオンラインフォームがウェブサイトにあり、フォームのコードはHTML形式です。しかし、誰かがフォームを通じて情報を送信すると、フォームは自動的に私に情報（設定済み）を送信し、JSONの情報をTrulioのAPIに送信するように設定する必要があります。 APIが私に結果を知らせてくれるはずです。

私はコーディングで多くの経験がありませんが、私はこのシステムを自動化するために、これには面白いコードが必要であることを知っています。

誰でも手助けできますか？ここで

は、フォームのコードの一部です：

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

そこからFormstack（オンラインフォーム会社）入力された情報を送信するためにいくつかのコードを使用しています。私はそれがこのようにJSON形式である必要があります。

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

あなたは次のようになりますいくつかのコードを含むJavascriptのファイルが必要になります...

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

あなたは要件を明確にする必要がありますし、多分Webプログラミングで多くの研究を行う必要があります...