APIオブジェクト配列にHTMLフォーム入力を挿入する方法

Question

私は結合したい2つのコード "スニペット"を持っていますが、実際にどのようにすればよいか分かりません。

HTMLフォームの入力をJSONオブジェクトにすることができました。 codepen hereを参照してください。

「ノートを追加」ボタンをクリックすると、入力値を取得してオブジェクトに追加したいのですが、それらをapiオブジェクト配列にPOSTします。下の画像とコード例：

HTML JSON

// CREATE NEW NOTES 
var btn = document.getElementById('btn'); 

btn.addEventListener("click", function() { 

var request = new XMLHttpRequest(); 

request.open('POST', 'https://timesheet-1172.appspot.com/af25fa69/notes'); 

request.setRequestHeader('Content-Type', 'application/json'); 

request.onload = function() { 

    // When I click the "Add note" btn I want to grab the input values -> make them to an object -> POST them to my api object array. 

    // Like 

    // var body = { 
    // 'title': form.title.value, 
    // 'description': form.description.value 
    // } 

}; 

request.send(JSON.stringify(body)); 

}); 

にこれは私がオブジェクトのプロパティですでに設定されている変数を送ってみましょう私が持っている現在のコードです。 > JSONオブジェクトに変換 - - 私の質問は、私は、ダイナミック入力を行うことができますので、私は例カントーこれらを組み合わせることができますかについてれるしかし

SENDのJSON

> APIオブジェクトでそれらを挿入します。下の画像を参照してください。アレイ。

私が間違った経路にいると思っている場合や解決策があると思われる場合は、私を修正してください。

ご質問やご要望がございましたら、お気軽にお問い合わせください。

ありがとうございます！

// E

Answer 1

あなたは、このようにそれらを組み合わせることができ（と私は、これが最良のアプローチだと思う）：

提出し、それはJSONを作成し、それを送信するフォーム上で実行される関数を定義AJAX経由：

function formatJSONAndSend(form) { 
    var body = { 
    title: form.title.value, 
    description: form.description.value 
    }; 

    var request = new XMLHttpRequest(); 
    request.open('POST', 'https://timesheet-1172.appspot.com/af25fa69/notes'); 
    request.setRequestHeader('Content-Type', 'application/json');  
    request.send(JSON.stringify(body)); 
} 

そして、あなたはあなたのようなHTMLからそれを呼び出すことができます。

<form onsubmit="formatJSONAndSend(this);"> 
    Title: <input type="text" class="form-control" name="title" placeholder="Title goes here..." /><br /> Description: <input type="text" class="form-control" name="description" placeholder="Description goes here..." /><br /> 
    <input class="btn btn-primary" id="btn" type="submit" value="Add note"> 
</form> 

をクリックしてフォームを送信したら、ボタンを押してformatJSONAndSend()関数を呼び出すと、まずフォームからデータを取得してbodyオブジェクトに入れ、POSTを経由してWeb APIに送信します。

ここには実例があります：Codepen