Как регистрировать входные данные формы в объекте JSON с помощью vanilla JS?

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

Не могли бы вы посоветовать, как это исправить? Спасибо!

let kitForm = document.querySelector("#kitForm"),
  formData = new FormData(kitForm),
  submitButton = document.querySelector("#submitButton");

function onSubmit(e) {
  e.preventDefault();

  let jsonObject = {};

  for (const [key, value] of formData) {
    jsonObject[key] = value;
  }
  console.log(JSON.stringify(jsonObject));
}

submitButton.addEventListener("click", onSubmit);
<form id="kitForm">

  <label for="kitName">Kit name:</label>
  <input id="kitName" type="text" name="kitName">

  <label for="applicationName">Application:</label>
  <select id="applicationName" type="text" name="applicationName">
    <option>Application 1</option>
    <option>Application 2</option>
  </select>

  <label for="tradeName">Trade:</label>
  <select id="tradeName" type="text" name="tradeName">
    <option>Value 1</option>
    <option>Value 2</option>
  </select>

  <label for="description">Description:</label>
  <input id="description" type="text" name="description">

  <input id="submitButton" type="submit" value="Submit">
</form>


javascript json
person Heithwald    schedule 09.03.2020    source источник
comment
Дубликат JavaScript - получение значений HTML-формы - понятия не имею, почему за это проголосовали. просто воспользуйтесь поиском, ребята.   -  person rx2347    schedule 09.03.2020

Ответы (2)


arrow_upward
3
arrow_downward

Используйте сериализатор массива форм.

Вот пример:

let kitForm = document.querySelector("#kitForm"),
  formData = new FormData(kitForm),
  submitButton = document.querySelector("#submitButton");

function onSubmit(e) {
  e.preventDefault();
  console.log(serializeArray(kitForm));
}

submitButton.addEventListener("click", onSubmit);


function serializeArray(form) {
    var serialized = [];
    for (var i = 0; i < form.elements.length; i++) {
        var field = form.elements[i];
        if (!field.name || field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') continue;
        if (field.type === 'select-multiple') {
            for (var n = 0; n < field.options.length; n++) {
                if (!field.options[n].selected) continue;
                serialized.push({
                    name: field.name,
                    value: field.options[n].value
                });
            }
        }
        else if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
            serialized.push({
                name: field.name,
                value: field.value
            });
        }
    }

    return serialized;
};
<form id="kitForm">

      <label for="kitName">Kit name:</label>
      <input id="kitName" type="text" name="kitName">

      <label for="applicationName">Application:</label>
      <select id="applicationName" type="text" name="applicationName">
        <option>Application 1</option>
        <option>Application 2</option>
      </select>

      <label for="tradeName">Trade:</label>
      <select id="tradeName" type="text" name="tradeName">
        <option>Value 1</option>
        <option>Value 2</option>
      </select>

      <label for="description">Description:</label>
      <input id="description" type="text" name="description">

    <input id="submitButton" type="submit" value="Submit">
</form>

источник функции: https://vanillajstoolkit.com/helpers/serializearray/

person V. Sambor    schedule 09.03.2020

arrow_upward
0
arrow_downward

Вы можете попробовать переместить объявление formData внутрь функции отправки.

person HatemSat    schedule 09.03.2020