JavaScript and the Web — Forms. How to get values of various input…
By: John Au-Yeung
Tags: JavaScript, Web Development, Software Development, Technology, Programming

Photo by Severin Stalder on Unsplash

JavaScript is one of the most popular programming languages in the world. To use it effectively, we’ve to know about the basics of it.

In this article, we’ll look at how to use forms.

Focus

Form fields can get keyboard focus.

When we click or activate it in some way, they become currently active elements and receive keyboard input.

When it’s focused, we can type into a text field.

Other fields respond differently to keyboard events.

The select menu tries to move to the option that contains the text the user typed.

They also respond to arrow keys by moving selection up and down.

We can focus an input element with focus and blur methods.

For instance, we can write:

document.querySelector("input").focus();

Then the document.activeElement.tagName changes to 'INPUT' .

If we call blur :

document.querySelector("input").blur();

Then document.activeElement.tagName changes to 'BODY' .

HTML also provides the autofocus attribute to produce the same effect for focusing an input.

The tabinddex attribute lets us set the when the element will be reached by pressing the Tab key.

If tabindex is 1, then the first Tab press focus on that element.

Adding tabindex makes any HTML element be focusable.

tabindex of -1 makes tabbing skip over an element.

Disabled Fields

Form fields can be disabled through the disabled attribute.

For instance, we can add it to a button:

<button disabled>disabled</button>

Then the disabled button will be disabled.

Form Element

If a form element exists, the document object has a forms property that links to the forms on a page.

A form has the elements property with the elements inside the form.

For instance, if we have:

<form>

<input type='text'>

</form>

Then when we write:

const form = document.querySelector('form');

console.log(form.elements[0].type);

We get 'text' logged.

form.elements[0] is the input field itself.

If a input has the type of submit , then when the Enter button is pressed, the form will be submitted.

How it’s submitted by the action attribute. It can either be done with a GET or POST request.

Before that happens, the submit event is fired.

We can prevent the default submit behavior by calling preventDefault in the submit event handler.

If we have the following HTML:

<form>

<input type='text'>

<input type='submit'>

</form>

We can write:

const form = document.querySelector('form');

form.addEventListener("submit", event => {

event.preventDefault();

console.log(form.elements[0].value);

});

We may want to intercept submit events in JavaScript to let us check form values for validity before submissions.

Also, we may want to submit it via fetch to submit it without reloading the page.

Text Fields

The textarea or input with type set to text or password share a common interface.

They all have the value property that has the inputted value as a string.

The selectionStart and selectionEnd properties of the text fields give us information about the cursor and the selection of the text.

When nothing is selected, they return the same number.

0 indicates the start of the text, 1 is the 2nd character, and so on.

The replaceSelection function replaces the currently selected part of the text with the given word and moves the cursor after the word so that the user can continue typing.

The change event for a text field doesn’t fire every time something is typed.

It fires when it loses focus after the content is changed.

To listen to all input value changes, we should listen to the input event instead.

Photo by Muhammad Muzamil on Unsplash

Checkboxes and Radio Buttons

To listen to changes in a checkbox, we can use the checked property.

For instance, if we have the following HTML:

<input type="checkbox" id="green">

we can write:

const checkbox = document.querySelector("#green");

checkbox.addEventListener("change", () => {

document.body.style.background =

checkbox.checked ? "green" : "";

});

We used the checked property to check the value of the checkbox.

It’s true if it’s checked.

We set the background color of the body element to 'green' when it’s checked.

The label tag associates a piece of document with an input field.

For instance, we can write:

<label>

<input type="radio" name="fruit" value="orange"> Orange

</label>

<label>

<input type="radio" name="fruit" value="banana"> Banana

</label>

<p id='fruit'> </p>

We can check the of the radio button as follows:

const buttons = document.querySelectorAll("[name=fruit]");

for (let button of Array.from(buttons)) {

button.addEventListener("change", () => {

document.querySelector('#fruit').innerText = button.value;

});

}

Then we see the select choice populated in the p element when we click a radio button.

Conclusion

We can get the value of radio buttons, checkboxes, and text inputs in different ways.

We can listen to the change event to get the value after the input control is blurred.