Как вытащить данные из формы?

Question

[Егор Тельнов]

Здравствуйте! Появился такой вопрос. Допустим, есть такая форма:

<form method="POST" action="/saler/new-saler" id="add-saler">
                    <div class="form-group">
                        <label for="name" class="col-form-label">Имя:</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="surname" class="col-form-label">фамилия:</label>
                        <input type="text" class="form-control" id="surname" name="surname" required></input>
                    </div>
</form>

И есть такой JS:

document.querySelector('#add-saler')
    .addEventListener('submit', event => {
        event.preventDefault();
})

Собственно вопрос. Как получить данные формы? Искать каждый инпут с этой формы и брать его значение? Или можно как то вытащить из event?

Comments

[Vadim Bogomazov]

В jQuery есть методы serialize/serializeArray, на ванильном js реализация данного функционала здесь

Answer 1

[Виктор Л]

document.querySelector('#add-saler').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = Object.fromEntries(new FormData(e.target).entries());
  console.log(formData)
});

Comments

[Егор Тельнов]

Большое спасибо!

Answer 2

[Антон Неверов]

В jQuery есть удобный метод -
.serialize() и .serializeArray().
В ванильном JavaScript, на котором вы и пишите - можно использовать объект FormData, а затем получать данные через методы .get(), .getAll() и .entries() для перебора.

Например:

document.querySelector('#add-saler')
    .addEventListener('submit', event => {
        event.preventDefault();

        const form = e.target;
        const formData = new FormData(form);

        //formData.get("surname") - выведет данные поля surname
        for(let input of formData.entries()) {
           console.log(input[0], input[1]); //Выведет в консоль всю форму в виде "КЛЮЧ ЗНАЧЕНИЕ"
        }
    })

Comments

[Егор Тельнов]

Большое спасибо! Не знал раньше про этот объект

Answer 3

[семен яценко]

при помощи пхп можно все это записать в тхт файл