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.

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
– Wiktor Zychla, Commented Feb 5, 2020 at 18:27
@WiktorZychla Eventually append the form's data to a list element that will be displayed. — John Allison
– John Allison, Commented Feb 5, 2020 at 18:33

Federico Moretti · Accepted Answer · 2020-02-05 18:42:35Z

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 5, 2020 at 18:42

Federico Moretti

6742 gold badges12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

benbotto Over a year ago

The form can be submitted with the enter button, which is how the OP states the form is being submitted.

Federico Moretti Over a year ago

Your solution is slightly better than mine, BTW. But just typing [Enter] without a button or an input is a bad practice, IMHO.

John Allison Over a year ago

@FedericoMoretti Why's that?

Federico Moretti Over a year ago

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.

benbotto · Accepted Answer · 2020-02-05 18:41:17Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related