telnov_magic
@telnov_magic
Между небом и омутом, между серпом и молотом

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

Здравствуйте! Появился такой вопрос. Допустим, есть такая форма:
<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?
  • Вопрос задан
  • 2939 просмотров
Решения вопроса 2
Fzero0
@Fzero0
Вечный студент
document.querySelector('#add-saler').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = Object.fromEntries(new FormData(e.target).entries());
  console.log(formData)
});
Ответ написан
TTATPuOT
@TTATPuOT
https://code.patriotovsky.ru/
В 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]); //Выведет в консоль всю форму в виде "КЛЮЧ ЗНАЧЕНИЕ"
        }
    })
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
andi88lev
@andi88lev
Каталог калькуляторов онлайн - https://calcok.com/
при помощи пхп можно все это записать в тхт файл
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
25 нояб. 2024, в 18:39
30000 руб./за проект
25 нояб. 2024, в 18:35
30000 руб./за проект
25 нояб. 2024, в 18:33
10000 руб./за проект