Reading Input Values
Access values from text, checkbox, and select inputs.
Reading Input Values is a free JavaScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Working With Form Data
Forms collect user input through fields like text boxes, checkboxes, radios, and dropdowns. Each exposes its data slightly differently.
input.value
Text-like inputs expose their current contents through the value property, always a string.
const name = document.querySelector("#name");
console.log(name.value);value Is Always a String
Even number inputs return a string. Convert explicitly when you need a number.
const age = document.querySelector("#age");
const n = Number(age.value);valueAsNumber
Number and date inputs offer valueAsNumber, which returns a number directly (or NaN if empty/invalid).
const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);checkbox.checked
Checkboxes report their state through the boolean checked property, not value.
const agree = document.querySelector("#agree");
console.log(agree.checked); // true or falseRadio Buttons
For a radio group, find the checked one. The checked property identifies the selected option.
const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");select Value
A single-select dropdown exposes the chosen option through value.
const country = document.querySelector("#country");
console.log(country.value);Multi-select
For a multi-select, read selectedOptions and map to values.
const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);The input Event
Listen for the input event to react to every keystroke or change in real time.
name.addEventListener("input", (e) => {
console.log(e.target.value);
});The change Event
The change event fires when a field loses focus after its value changed, or immediately for checkboxes and selects.
country.addEventListener("change", (e) => {
console.log("chose " + e.target.value);
});FormData
FormData collects all named fields of a form at once, ideal for sending to a server.
const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));Quick Check
Read the checkbox correctly.
Recap
Read text inputs via value (always a string; use valueAsNumber for numbers), checkboxes/radios via checked, and dropdowns via value or selectedOptions. React with the input event (every change) or change event (on commit), and gather everything at once with FormData.
Frequently asked questions
Is the “Reading Input Values” lesson free?
Yes — the full text of “Reading Input Values” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Reading Input Values”?
Access values from text, checkbox, and select inputs. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Reading Input Values” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Reading Input Values
- The submit Event
- Client-Side Validation
- The Constraint Validation API