How to Get Input Value in JavaScript

To get an input value in JavaScript, select the input element and read its value property. You can do this directly; the input does not need to be wrapped in a form. Choose a lookup method based on how the input is identified: an ID, a shared class, or a CSS selector. The examples below use a small browser-like fixture so the selection and value-reading steps can also produce a visible result in the supplied runtime. In a page, use the same DOM methods on document; place the script after its input markup or run it after the page has loaded.

Get an input value with document.getElementById()

Give the input a unique id, then pass that ID to document.getElementById(). The method returns the matching element, so its value property reads the text currently held by that input. The snippet creates an input, assigns its ID and value, and displays the selected value. The supplied runtime case produced Ada. This approach is a good fit when the page gives one field a stable, unique ID, such as a name or email input. IDs should be unique within the document; if two elements share one, the lookup cannot express which one you intended. For a field rendered later by a framework or inserted after the script runs, perform the lookup only after that element exists. The returned object is the input itself, and .value reads its current contents. It does not read a nearby label or the element’s HTML attribute as a separate source.

const doc = globalThis.document ?? (() => {
  const elements = [];
  return {
    createElement: () => ({ id: "", value: "" }),
    body: {
      append: (...nodes) => elements.push(...nodes),
      set textContent(value) { console.log(value); }
    },
    getElementById: id => elements.find(element => element.id === id) ?? null
  };
})();

const input = doc.createElement("input");
input.id = "name";
input.value = "Ada";
doc.body.append(input);

const currentValue = doc.getElementById("name").value;
doc.body.textContent = currentValue;

Ada

Get input values by class with document.getElementsByClassName()

Use document.getElementsByClassName() when multiple inputs share a class. In a browser it returns an indexed HTMLCollection, not an array. Read the intended input by its position, starting at index 0, and then access .value. Keep that position aligned with the order of matching elements in the page. The code below uses a small fixture when run outside a browser; its result is an indexed list for this example. The supplied runtime case selected the second input and produced Grace. A class is useful when a page repeats the same kind of control, but the index depends on document order. If the page adds, removes, or reorders matching inputs, the same index may refer to a different field. When possible, pair the class with a more specific container or choose an ID for one known field. An HTMLCollection is array-like and supports numeric indexing, but it is not an array; array methods such as .map() are not directly available on it. If you need to process each match, use a loop or convert the collection with Array.from().

const doc = globalThis.document ?? (() => {
  const elements = [];
  return {
    createElement: () => ({ className: "", value: "" }),
    body: {
      append: (...nodes) => elements.push(...nodes),
      set textContent(value) { console.log(value); }
    },
    getElementsByClassName: className => elements.filter(element => element.className.split(/\s+/).includes(className))
  };
})();

const firstInput = doc.createElement("input");
firstInput.className = "contact";
firstInput.value = "Ada";

const secondInput = doc.createElement("input");
secondInput.className = "contact";
secondInput.value = "Grace";

doc.body.append(firstInput, secondInput);

const currentValue = doc.getElementsByClassName("contact")[1].value;
doc.body.textContent = currentValue;

Grace

Get an input value with document.querySelector()

document.querySelector() accepts a CSS selector and returns the first matching element. Use #name for an ID, .contact for a class, input for a tag, or [name="email"] for a name attribute. Apply .value to the selected input. If a selector matches several elements, this method reads only the first; use querySelectorAll() to work with all matches. A selector that matches no element returns null, so confirm that the selector matches an input before reading its value. The example selects an input by its name attribute. The supplied runtime case produced ada@example.com. Use a selector that expresses the most stable identifying detail available, and keep it aligned with the page markup. For example, [name="email"] works when the input has that exact name attribute; changing the markup to name="contactEmail" requires changing the selector too. Since querySelector() returns only one element, it is concise when the page should provide one intended match. When every matching input matters, querySelectorAll() returns a collection that you can iterate.

Reading a value does not submit a form or change the input. It simply gives your script the text currently entered, which you can validate or use in an event handler. If you show that text back on the page, assign it with textContent so the browser treats it as text rather than markup. In a real form, also decide when to read the value: an event handler can capture it after the user types or submits, while code that runs only once at page load reads the value at that moment. The three methods differ mainly in how they find the element; once you have the input element, .value is the same property to read.

const doc = globalThis.document ?? (() => {
  const elements = [];
  return {
    createElement: () => ({ name: "", value: "" }),
    body: {
      append: (...nodes) => elements.push(...nodes),
      set textContent(value) { console.log(value); }
    },
    querySelector: selector => {
      const match = selector.match(/^\[name=["'](.+)["']\]$/);
      return match ? elements.find(element => element.name === match[1]) ?? null : null;
    }
  };
})();

const input = doc.createElement("input");
input.name = "email";
input.value = "ada@example.com";
doc.body.append(input);

const currentValue = doc.querySelector('[name="email"]').value;
doc.body.textContent = currentValue;

ada@example.com