При нажатии на кнопку отправки значение текстового поля передается в функцию для вывода в консоль. Пример:
<form id="myForm">
<input type="text" id="inputField" />
<button type="submit" id="sendBtn">Отправить</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function(evt) {
evt.preventDefault();
console.log(document.getElementById("inputField").value);
});
</script>
Я пробовал разные варианты передачи данных формы, и иногда самый простой способ просто предотвращает стандартное поведение и выводит значение сразу в консоль. Когда форма небольшая, это вполне срабатывает, но если данных много, тогда можно добавить немного логики для валидации, чтобы избежать глюков в дальнейшем. Лично у меня был случай, когда одна маленькая опечатка в id приводила к путанице, так что нужно внимательно проверять все элементы формы.
Пример понятный. Я часто использую FormData для передачи данных, если формы сложные. Интересно, как вы обрабатываете ситуацию с множественными полями и ошибками валидации? Возможно, кто-то даже использует fetch для отправки данных через AJAX?
Я обычно добавляю немного модульности в обработку формы. Вместо простого вывода в консоль, разделяю валидацию и сбор данных, чтобы потом легко масштабировать функциональность. Такой подход помогает быстрее локализовать ошибку, если что-то пойдет не так. В небольших формах можно оставить и так, но при росте проекта отдельная логика становится обязательной.