ユーザー入力による配列へのオブジェクトの追加

Question

私は、ユーザーが2つの「アクティビティ」を選択するフォームを作成します。この情報は個人情報と一緒に保存され、それぞれの活動の下にサインアップした異なる個人を後でリストします。私は、このオプションリストにもっと多くのアクティビティを追加できるフォームを作成したいと思いますが、ユーザーに見えます。私はこれについてどうやって行くのか分かりません。私はさまざまなアクティビティを持つ配列を作成しましたが、ハードコードはできませんが、代わりに指定された「管理フォーム」を使用して新しいオブジェクトを生成する必要があります。ここからどこに行くのですか？

これは、これまでのところ、私の配列です：

var sport = [ 
    { 
    id:1, 
    Name:"Fotboll", 
    Place:{lat:59.999999, long: 17.99999}, 
    Val:[{id:1, plats:"indoors"},{id:2, plats:"outdoors"}] 
    }, 
    { 
    id:2, 
    Name:"Tennis", 
    Place:{lat:59.88888, long: 17.88888}, 
    Val:[{id:1, plats:"indoors"},{id:2, plats:"outdoors"}] 
    } 
]; 

Answer 1

は、ここで要求されたロジックを実装して、基本的なフォームの例です。いくつかのフォーム要素を変更する必要があるかもしれませんが、これはあなたの必要性を満たすはずです。

var myActivities = []; 
 

 
document.querySelector('form button').addEventListener('click', function(event) { 
 

 
    var inputs = document.querySelectorAll('form input'); 
 
    var newActivity = {}; 
 
    for (var i = 0; i < inputs.length; i++) { 
 
    newActivity[inputs[i].name] = inputs[i].value; 
 
    inputs[i].value = ''; 
 
    } 
 
    myActivities.push(newActivity); 
 
    console.log(myActivities); 
 
    event.preventDefault(); 
 

 
}, false);

<form> 
 
    <input type="text" name="name" value="" placeholder="Name" /><br /> 
 
    <input type="text" name="input2" value="" placeholder="Input 2" /><br /> 
 
    <input type="text" name="input3" value="" placeholder="Input 3" /><br /> 
 
    <input type="text" name="input4" value="" placeholder="Input 4" /><br /> 
 
    <button>Add</button> 
 
</form>