JavaScript Academy · Lesson

Reading Input Values

Access values from text, checkbox, and select inputs.

Lesson 1 of 413 steps

Reading Input Values is a free JavaScript Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.

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 false

Radio 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.

Answer it in the interactive lesson

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.

Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 59
Lessons: 200

Start learning free View the full course

Frequently Asked Questions

Is the “Reading Input Values” lesson free?

Yes — any 3 lessons of the JavaScript Academy learning path, including “Reading Input Values”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

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

← Back to JavaScript Academy