Using User Input Fields in JavaScript

Call-and-responses go way back; I’m talking way back. From children’s games —

– “Marco?”

– “Polo!”

— to entertainers hyping up a crowd —

– “Hey!”

– “Ho!”

— to cheerleaders encouraging their team —

– “When we say ‘number,’ you say ‘one!’ Number!”

– “One!”

— call-and-responses are no stranger to the average person. This rings true for in coding, as well, as users interact with their browsers, which make calls to local or global servers which, in turn, send back responses. Similarly, when working with user input fields, the program will call for information from the user, whose response is then logged and interpolated into the program. Here is a comprehensive rundown on using user input fields in JavaScript to obtain information you can then use in your code.

Ways to Gather User Input

There are a number of ways to use JavaScript to prompt a user to enter information; one example is the prompt() command.

This will call for a dialog box to appear and prompt the user to enter their information in the field provided.

The image above displays a prompt, the “Please enter your name:” shown, a form, the rounded rectangle with a hot pink border, and when the user enters the relevant information (in this case, their name) and clicks “OK” or presses “Enter,” their response is the input, which will be stored under the person variable in which we stored the prompt() command. The information that JavaScript receives from the user input is called the value, which we could then access by invoking the person variable we made earlier and, for example, return the value in a string of text. Assuming I filled out the field with my name, Jewel, I could then call on that value as shown below.

Another example of collecting and using user input is by using document.createElement() to build an HTML element that is an input field with accessible data.

When building my project, I used document.createElement() by creating an input variable —

— as well as a form variable, which will provide the literal input field (the box in which the information will be entered).

It is then crucial that you provide the elements you’ve created with IDs so that you can invoke them later on in your code.

In the picture shown above, I clarify the type of input being received (a date, which JavaScript defaults to formatting as MM-DD-YYYY), the ID of the input (and the form) so that I can refer to it later on in my code, and the class of the input, the necessity of which may vary depending on your particular code; I use the “validate” class as a way of ensuring that the user input matches the MM-DD-YYYY format. After providing the above information, it is important to add these elements you’ve created to the main <div> of your webpage.

Above, I appended the elements I created, input and form, as children of the main <div>, referred to above as the function mainDiv(), and then appended the input itself as a child element of the form element, which essentially tells the code that while I’m accessing the form element, I will also be using the input element.

My project uses the date input field to calculate the user’s zodiac sign, which I made into a function called findBirthday() which passes on its information to its nested function called findSign(). For both functions to work, I need to access the information that the user provides in the input element (found inside the form element). I can do this by passing my findBirthday() function a variable (which I’ve named “userInput”) as a parameter and then defining that variable and assigning it the value of that input element I created just a few lines earlier by using document.getElementById().value. The ID of the input element proves its usefulness now because we could not access the element or its value as easily without it.

I’ll spare you the details of converting an “MM-DD-YYYY” string input into a specific zodiac sign, but I will explain that any value that JavaScript receives from the user will come in the operand type of a string, so when working with your input values, you must convert the value from a string to whichever alternative type of operand you require, whether it’s an integer, a boolean, or another operand type.

So, for example, if the user enters their birthdate as 04/14/1998, JavaScript receives this information as a string of “04–14–1998,” which would then have to be converted into any other type of operand needed.

Now, go forth and collect all the data from your users that your programmer heart desires!