Using getElementById() with Form Elements

document.getElementById() returns the element whose id matches the value you provide. For forms, it gives direct access to properties such as value, checked, disabled, style, focus(), and select().

const nameInput = document.getElementById("name");
console.log(nameInput.value);

An id must be unique in the document. Use one stable ID per element you need to address directly.

Basic getElementById() Example Top ↑

This keeps the original tutorial idea of selecting an element by ID and changing it:

<span id="my_text">Hello world</span>
<script>
document.getElementById("my_text").style.color = "red";
</script>

Read Values and Update Text Top ↑

Use value for form controls. For plain text output, prefer textContent. Use innerHTML only when you intentionally need to insert trusted HTML.

const input = document.getElementById("t1");
const message = document.getElementById("my_msg");

message.textContent = input.value;
input.value = "Welcome";

The older page used document.write() to display form values. That method is retained on the dedicated document.write() legacy reference, but normal DOM updates should use textContent, append(), or related DOM methods.

Select Text with focus() and select() Top ↑

const input = document.getElementById("t2");
input.focus();
input.select();

focus() moves keyboard focus to the control. On compatible text controls, select() selects the current text so it can be replaced quickly.

Change Element Styles Top ↑

The original page demonstrated changing text and background colors. The same idea works with event listeners instead of inline onclick attributes:

const heading = document.getElementById("d_color");

document.getElementById("redButton")
  .addEventListener("click", () => {
    heading.style.color = "red";
  });

For larger applications, toggling CSS classes with classList is usually easier to maintain than assigning many inline style properties.

Enable and Disable a Form Control Top ↑

const input = document.getElementById("t1");

input.disabled = true;  // disable
input.disabled = false; // enable

The dedicated enable/disable form-control tutorial shows this pattern with a checkbox.

Show and Hide an Element Top ↑

const message = document.getElementById("d_show");

message.hidden = true;
message.hidden = false;

The original example changed style.display directly. The native hidden property is often simpler when the requirement is only to show or hide an element.

Checkbox and Radio State Top ↑

Checkboxes and radio buttons expose a Boolean checked property. Their value and name are separate properties.

const agree = document.getElementById("c1");

if (agree.checked) {
  console.log(agree.name, agree.value);
}

Checkbox getElementById() demo Radio getElementById() demo

Handle Form Events Without Inline Handlers Top ↑

The original tutorial connected text inputs, radio buttons, a select list, and a checkbox to a common function. Modern code can use addEventListener() and the event object's target property:

function reportField(event) {
  const field = event.target;

  if (field.type === "checkbox") {
    console.log(field.id, field.name, field.checked);
  } else {
    console.log(field.id, field.name, field.value);
  }
}

for (const id of ["t1", "t2", "r1", "r2", "s1", "c1"]) {
  document.getElementById(id)
    .addEventListener("change", reportField);
}

This no longer needs the old window.onload assignment because a script placed after the form can safely attach listeners once those controls have been parsed.

Common Mistakes Top ↑

• Do not reuse the same id on multiple controls. IDs must be unique.
• Check that an element exists before using it when the markup is optional or conditionally rendered.
• Use checked for checkbox/radio state instead of comparing the string value alone.
• Prefer textContent for text output instead of injecting strings through innerHTML.
• Prefer addEventListener() over mixing JavaScript into HTML attributes.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: