Get value of text input field using JavaScript
Matthew C.
—The Problem
You want to get the value of a text input field using JavaScript. How do you do this?
The Solution
Get the <input> element using one of the methods on the document interface that returns a DOM Element, such as getElementById. You can then get the element’s value using the value property. The example code below shows HTML and JavaScript code for an <input> element with a button to get the value of the input:
<label for="name">Name:</label> <input type="text" id="name" name="name" required /> <button id="input-btn" type="button"> Get input value </button>
const inputBtn = document.getElementById("input-btn"); const inputEl = document.getElementById("name"); function getInputVal() { console.log(inputEl.value); } inputBtn.addEventListener("click", getInputVal);
A "click" event listener is added to the button to get the value of the input when the button is clicked.
- YoutubeHow Sentry.io saved me from disaster
- ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
- SentryJavascript Error Monitoring & Tracing
- ResourcesJavaScript Frontend Error Monitoring 101
- Syntax.fmListen to the Syntax Podcast
- Listen to the Syntax Podcast
![Syntax.fm logo]()
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODES
Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.