Генерация JSON с использованием тех же полей пользовательского интерфейса

Question

У меня есть такая форма: https://jsfiddle.net/6vocc2yn/, которая возвращает json, как

    {
  "List": [
    {
      "Id": 10,
      "Name": "SDB_SOLOCHALLENGE_CHALLENGE_DESC_10",
      "email": "abc.abc@xyz.com",
      "message": "SDB_SOLOCHALLENGE_CHALLENGE_BACKGROUND_IMAGE_10",
      "someOtherList": [
        {
          "a": 10,
          "b": 14
        }
      ],
      "opponentFighterItemDefinitionId": 4294967295,
      "title": "abc"
    }
  ]
}

Я хотел добавить кнопку, которая бы просто сбрасывала текущие поля, но сохраняла информацию и добавляла информациюкоторый пользователь вводит в следующий раз.

например:

{
      "List": [
        {
          "Id": 10,
          "Name": "CHALLENGE_DESC_10",
          "email": "abc.abc@xyz.com",
          "message": "BACKGROUND_IMAGE_10",
          "someOtherList": [
            {
              "a": 10,
              "b": 14
            }
          ],
          "oppId": 111,
          "title": "abc"
        },

       {
      "Id": 11,
      "Name": "CHALLENGE_DESC_11",
      "email": "abc.abc@xyz.com",
      "message": "CHALLENGE_BACKGROUND_IMAGE_11",
      "someOtherList": [
        {
          "a": 11,
          "b": 15
        }
      ],
      "oppId": 222,
      "title": "abc"
    }
      ]
    }

Как эффективно объединить с .push?

Answer 1

var dataObject = {
    List: []
};

document.getElementById('add').addEventListener('click', function(e) {
    e.preventDefault();
    var formData = {
    name: document.getElementById("name").value,
    mail: document.getElementById("mail").value,
    msg: document.getElementById("msg").value
  };

  dataObject.List.push(formData);
  console.log(dataObject);

  // formId is the id of the form, "<form id="formId"..."
  document.getElementById("formId").reset();
});