How to get text box value in JavaScript

Diverse approaches and important notes

Sure, getElementById() gets the job done but who doesn't love to entertain the alternatives every now and then? We'll also round up some considerations that are worth a second look.

Differentiating with querySelector

querySelector(), more flexible than a professional acrobat, uses any CSS selectors for even more impressive results:

let jazzyText = document.querySelector('#myText').value;
console.log(jazzyText); // Does it dance the same way as getElementById()? Let's find out.


Updating for value changes

To ensure your application is as responsive as a well trained Golden Retriever, bind to the onchange event:

document.getElementById('myText').onchange = function(event) {
    console.log(event.target.value); // Who touched my value? Changes get reported instantly, like a neighbourhood watch for your code.
};


Quoting for multi-word attributes

Avoid the truncation trickster by confirming that your value attribute is fully quoted:

<input type="text" id="myText" value="Several words gathered here">


Encoding values, if you will?

Planning to use user input as URL parameters? Do remember to say 'hello' to encodeURIComponent:

let encodedJazzyText = encodeURIComponent(document.getElementById('myText').value);


Frameworks vouching for specific syntax

Adapting to syntax that your framework insists upon is as crucial as remembering to tie your shoelaces. Control IDs in ASP.NET, for instance:

let value = '<%= myTextbox.ClientID %>';


Advanced scenarios and enhancements

Diving into the theoretical pool, let's address some advanced scenarios and practical enhancements.

Compatibility across browsers

In an ideal world, all browsers behave identically. But not all worlds are ideal, so do remember to use modern JavaScript methods.

Encoding for spaces in value

The replacement of spaces with '+' is as fitting as a good hat on a bright day:

let spaceFreeJazzyText = document.getElementById('myText').value.replace(/ /g, '+');


Juggling multiple inputs

A good artist knows how to handle multiple props. Similarly, using id or an index can help you handle multiple text inputs:

let form = document.querySelector('form');
let inputValue = form.elements['inputName'].value; // Access by name


Unicode handling

In a global village, ensure Unicode is accurately represented for international applications.

A brief visit to jQuery

If you're in jQuery land, val() might be a shorter path to your destination:

let jazzyText = $('#myText').val();


HTML validation

Ensure to check your HTML with a validator to make sure no syntax errors are causing scenes.

Employing modern JavaScript syntax

Embrace modern syntax such as arrow functions. Cool code never goes out of style.

document.getElementById('myText').addEventListener('change', (e) => {
    console.log(e.target.value);
});
