Forms

In addition to creating events that respond to clicks and such, developers can, and should also utilize form elements to gather data from users that is needed for sites.

Input

If you remember from Intro to Web Dev (MART341) <input> elements constitute most of the available form elements. They allow for specific types of form elements to be specified using the type="" attribute.

For most form sub-variety elements, we can get or set the value of specific elements using the value attribute. (i.e. el.value="" or el.value;)

let el = document.querySelector("#textInput");
console.log( el.value ); // returns the value of the text input box

text input

One of the form elements that gets used most commonly is the text input.

<input type="text" name="Text Input" placeholder="write here" id="textIn1">

With events, we can now create a single function, that will do something locally with the data (as opposed to sending the form data to a server).

Assuming we create a HTML page with a text input element that is similar to the example above, let’s now create a JS function that will take the value of the element, check to make sure something is there, then add it as a new element below the form.

For the time being, this function name will be grabText().

function grabText() {
    // do something
}

To get the form data, we need to select the text input element, grab its value, and store it in a binding.

let textIn;
textIn = document.querySelector("#textIn1").value;

Then, we can check to see if the user actually put something in there. To do this, we will simply see if the string length of the returned value is less than 1. If it is, then there is no text, so we push an alert().

if( textIn.length < 1){ alert("please supply some text!"); return }

Finally, if this text is valid, then we create a new text node and add this to a paragraph node. We finally add this new node as a child of a storage div we created on the HTML page.

// create a new node to add text to
let textToAdd = document.createTextNode(textIn);
// create a new paragraph element
let newP = document.createElement("P");
// add the text to the elements
newP.appendChild(textToAdd);
// select the storage div
let storage = document.querySelector("#storageDiv");
// append the paragraph element to the div storage element
storage.appendChild(newP);

The next problem to solve is to add event listeners that will cause the function to execute when we press the return key or click the “run” button.

For the return key, we run into one problem. By default, when a user presses return, a browser will send the form to the specified server, even if no server URL is specified. Since we are using this data locally and want it to persist (i.e. not allow the page to be reloaded when return is pressed), we need to suppress the “default behavior of the form in a browser”. To do this, we need to intercept the return key press within the form, then tell the browser to suppress the default behavior. At the same time, we instead want to execute the grabText() function we defined above. We can accomplish by adding an event listener to the form itself, checking for the return key, and adding our two statements, as follows;

document.querySelector(".form1").addEventListener('keypress', (event) => {
    if (event.keyCode == 13) {
        event.preventDefault();
        grabText();
    }
});

The button functionality is far simpler, as all we need to do is register an event listener to execute the grabText function when the button is “clicked”.

document.querySelector("#runButton").addEventListener('click', grabText );

The full code is as follows.

radio buttons

Radio buttons are perhaps slightly more complicated, in that we have to check if each button is checked or not. But, as you will see, these qualities can also allow for eloquent code.

In the following example, we use radio buttons within a form to set the background color of the body element. The radio buttons are placed in the HTML document, following principles from MART341.

The JavaScript portion is rather straight forward. First, the code selects references to the form itself, as well as all of the radio buttons.

Then an event listener is added to the form, that looks for “clicks”.

Finally, the function that is executed whenever there is a click, simply looks at each of the radio buttons individually. If the radio buttons .checked property is true, then the .value property of that button is used to set the background style of the page.

Other Form Elements

Other form elements can all be interfaced with in similar ways to the two discussed on this page. Using event listeners and the form element properties will allow you local access to the information and data provided on these forms.