Как отправить данные из текстового поля в HTML в переменную JavaScript?

Question

Я не могу понять, как передать вход HTML в переменную JS.

<form id="form" target="_self">
    <input type="text" id="task" placeholder="What's on the agenda?" onsubmit="getForm()">
</form>

Моя HTML форма с вызываемой функцией следующим образом:

function getForm() {
    var form = document.getElementById("task").value;
    console.log(form);
}

Однако, когда я нажимаю клавишу ввода после ввода введенного текста, она просто обновляет страницу и изменяет URL-адрес с index.html to index.html?task=foo и ничего не регистрирует в консоли.

Answer 1

Существует две проблемы с кодом OP.

1. Функция getForm не будет выполнена, поскольку onsubmit подключен к элементу input вместо элемента form. HTMLInputElement не генерирует submit событий.
2. Действие формы по умолчанию - отправка формы на сервер, поэтому, даже если функция getForm настроена правильно, она будет выполняться быстро и тогда страница обновится sh. Вероятно, вы хотите предотвратить это действие по умолчанию.

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

'use strict';

const taskFrm = document.getElementById('taskFrm');
const taskTxt = document.getElementById('taskTxt');

taskFrm.addEventListener('submit', e => {
  e.preventDefault();
  console.log(taskTxt.value);
});

<form id="taskFrm">
  <input id="taskTxt" placeholder="What's on the agenda?">
</form>

Ради полноты, если вы хотите подключить функцию onsubmit в HTML, вот как:

function getForm(e) {
    var form = document.getElementById("task").value;
    console.log(form);
    
    e.preventDefault(); // Or return false.
}

<form id="form" target="_self" onsubmit="getForm(event)">
    <input type="text" id="task" placeholder="What's on the agenda?">
</form>

Answer 2

Попробуйте:

<form id="form" onsubmit="getForm()" target="_self">
  <input id="task" placeholder="What's on the agenda?" type="text">
</form>

и

function getForm(event) {
  event.preventDefault();
  var form = document.getElementById("task").value;
  console.log(form);
}

… но имейте в виду, что для отправки формы вам нужна хотя бы кнопка или ввод.

Answer 3

Когда вы нажимаете ввод, страница обновляется, поэтому входные данные немедленно теряются, добавьте в конец тела следующий скрипт:

<script>
    $("form").submit(function (e) {
        e.preventDefault();
        getForm();
    });
</script>

Исходный ответ