How do I submit data from a text field in HTML to a JavaScript variable?

Question

I cannot figure out how to pass an HTML input to a JS variable.

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

My HTML form with the function being called as follows:

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

However, when I press enter after typing into the input text, it just refreshes the page and changes the URL from index.html to index.html?task=foo and doesn't log anything in the console.

[`event.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) — Ritesh Khandekar, Feb 05 '20 at 18:26
By default, the `form` tag submits your form to a server which results in refreshing the page. Also, because your form method is `GET`, your input value is appended to the url. What are you trying to do? — Wiktor Zychla, Feb 05 '20 at 18:27
@WiktorZychla Eventually append the form's data to a list element that will be displayed. — John Allison, Feb 05 '20 at 18:33

score 1 · Answer 1 · answered Feb 05 '20 at 18:41

There are two issues with the OP's code.

The getForm function will not execute because onsubmit is wired up against the input element instead of the form element. HTMLInputElement doesn't emit submit events.
The default action of a form is to submit the form to the server, so even if the getForm function were correctly wired up it would execute quickly and then the page would refresh. Likely you want to prevent that default action.

Generally speaking, it's good practice to wire up event listeners in your JavaScript code. Here's a snippet that demonstrates working code akin to what the OP is attempting.

'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>

For the sake of completeness, if you want to wire up the onsubmit function in the HTML, here's how:

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>

score 1 · Accepted Answer · answered Feb 05 '20 at 18:42

1

Try this:

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

and

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

…but keep in mind that you need at least a button or an input to submit the form.

answered Feb 05 '20 at 18:42

Federico Moretti

527
1
11
22

The form can be submitted with the enter button, which is how the OP states the form is being submitted. – benbotto Feb 05 '20 at 18:45
Your solution is slightly better than mine, BTW. But just typing `[Enter]` without a button or an input is a bad practice, IMHO. – Federico Moretti Feb 05 '20 at 18:49
@FedericoMoretti Why's that? – John Allison Feb 05 '20 at 18:50
1

Just for accessibility concerns: it must work by typing, but you should provide a visual input/button to click on as well. It will work even without it, anyway. – Federico Moretti Feb 05 '20 at 18:53

How do I submit data from a text field in HTML to a JavaScript variable?

2 Answers2