How to get the values from a form in JavaScript

Introduction

Hello everyone, in this article we are going to grab the values from a form with javascript, and store them in an object. We are going to see how we can access the values from an input field, a textarea, a select dropdown menu, and from radio buttons.
Except the form elements mentioned above, we are also going to grab multiple values from checkboxes.

Live Demo

In the demo below i have a form which has all the elements mentioned above.
Play around and select or input values in the fields, to see them showing up at the right side of the form.
For example select you favorite color from the select menu and hit the submit button.

I hope you tried out the demo, so you have an idea on what we are going to do.
If you like you can download the source code of the demo which includes also the CSS file. The download button is at the bottom of the page.

Now let's see how we can access those form values when we hit the submit button.

Files we need

• We need an index.html file to write the form.
• And we need a script.js JavaScript file to write the code.
• Both files are in the same directory.

The index.html file

Lets start with the index file and the form element. We are going to build the exact same form as we saw in the demo.

<form name="my-form" action="" method="post">
		
	<button type="submit" name="submit">Submit</button>
</form>	
<script src="script.js"></script>

• name="my-form"... I gave the form element a name of "my-form".
  We are gonna see why, a few lines down when we use javascript to target the form.
• action=""... I left the action attribute empty. This means that the form will submit the data to the same page. In this case to the index.html file. But we don't make use of the action attribute in this tutorial because we are going to fetch the data with javascript.
• method="post"... I have set the http request method to "post". Again we will not use in this tutorial the method attribute, but like the action attribute its a good practice to have them in case you want to send the data to the server after we catch them.
• In line 3 we have the submit button.
• And in line 5 we have a script tag with the src attribute pointing to our javascript file.

Now let's go to the javascript file, to access first the form element, and later on we will create all the input elements and see how to access their values step by step.

The javascript file

In order to access the form values we need to access first the form itself.
So let's see how we can access the form element from the javascript file.

If we write ...

document.forms;

...this will target all the form elements that we have in the index page.
This will return an array which will hold all the form elements.

But since we have only one form in our index file we can do this.

document.forms[0];

We can target the first item in the array which will give us access to the form element.

But we can also target the form element using the form's name attribute.

document.forms["my-form"];

And this is what we are going to use.

Now let's create a variable named form and store the form element.

let form = document.forms["my-form"];

With the form variable we have access to the form object and all the form's input elements inside.
We will see this later on when we start to create the input elements.

Now that we have access to the form element, let's assign an onsubmit event-listener to it.

form.addEventListener("submit", getValues);

The addEventListener method takes two arguments. In the first argument we pass-in the event we want to trigger, in our case we want the "submit" event. And in the second argument we pass-in the name of the function that is going to be executed. In our case this is the getValues function.
In short everytime we press the submit button, the getValues function will run.

Next step we are going to write the getValues function.

function getValues(event){
	event.preventDefault();

}	

• getValues(event)... we are going to pass the event object as an argument, because we want access to the preventDefault method to stop the form submit the data to the server.
• In line 5 we use the preventDefault method. Now we can work in the javascript file and catch the form's data.

Now that we have set up the event-listener, let's start to see how we get the values from the input elements.

Getting the values

Let's see how we get the values from the various input elements.

From now on every html form element that we create, is considered to be written inside the html form, and every javascript code inside the getValues function.

The input element

Let's see first the input field. This is the first field in the form. Notice the name attribute.

<input type="text" name="somename">

To get the value from an input field we are going to say ...

this.somename.value

• The this keyword refers to the form element. It is the same thing as form.somename.value.
• Next we are targeting the input field's name attribute's value. this.someone. This will give us access to the input element.
• And last we are getting the value. this.someone.value. That's it. When we hit the submit button we will have access to whatever we type in the input field.

The textarea element

In the textarea element we gave the name attribute, the value of "bio".

<textarea name="bio"></textarea>

We are gonna do the same thing as we did with the input element. We are going to target the name attribute to access the textarea's value.

this.bio.value

This will give us the value of the textarea.

The select dropdown element

This is the select dropdown menu. Again we are going to target the name attribute to get the selected option value.

<select name="fav-color">
	<option value="">Select a color</option>
	<option value="red">Red</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
	<option value="black">Black</option>
</select>

Notice that the name attribute value is separated by a dash "fav-color", this means that in order to access the element by the name we have to use brackets notation [""] like we do when we want to access an item inside an array.

this["fav-color"].value

This will give us the value of the selected option tag.

The radio buttons

When we have more than one radio button in our application we group them together by giving them the same name. In our case we set the name attribute to "gender", but they have different values. The first one has the value of "male", and the second one the value of "female".
When it comes to radio buttons we can only check one option.

<span>Male</span>
<input type="radio" name="gender" value="male">

<span>Female</span>
<input type="radio" name="gender" value="female">

To get the value with javascript we do exact the same thing as we did with the other elements. We target the name attribute's value, to access the checked radio button. And then we grab the value.

this.gender.value

This will give us the value of the selected option tag.

The checkboxes

To get the values from the checkboxes is a little bit tricky. And that is because we can check more than one checkbox. This means that we have to store the selected checkbox value to an array.

<span>Pizza</span>
<input class="fav-foods" type="checkbox" name="foods[]" value="pizza">

<span>Spaghetti</span>
<input class="fav-foods" type="checkbox" name="foods[]" value="spaghetti">

<span>Broccoli</span>
<input class="fav-foods" type="checkbox" name="foods[]" value="broccoli">

Let's explain what we have here.
We have three checkboxes and we have given them the same class of "fav-foods". We did this so we can target them from the javascript code.
Also notice the name attribute of all the checkboxes is set to an array name="foods[]".
This is not necessary when we target the values with javascript, but it is mandatory if we want to send the data to the server in a php file.

Now let's see how we get access to the checked values with javascript.

let favFoods = document.querySelectorAll(".fav-foods");
let checkedFoods = [];
for (let food of favFoods){
	if(food.checked == true){
		checkedFoods.push(food.value);
	}
}	

• In line 5 we target all checkboxes by their classname using the querySelectorAll method. The querySelectorAll method returns an array containing the three checkbox elements. We store the array in the favFoods variable.
• In line 6 we create an empty array named checkedFoods.
• In line 7 we use a for of function to loop through the favFoods array.
• Inside the loop we will check with an if statement which checkbox is checked. This is in line 8.
• If the condition is true (food.checked == true), we are going to add the checked value to the checkedFoods array in line 9.
• Now the checkedFoods array is containing the checked values.

This was our last element that we have in the demo form. Now let's see how we can create an object which will have as properties the form elements names, and as values, their values.

Creating an object from the form's data

Now that we have access to all the form data, it is actually a very simple task to create an object out of them. Let's see this.

let formdata = {
	"name": this.name.value, 
	"bio": this.bio.value, 
	"fav color": this['fav-color'].value, 
	"gender": this.gender.value,
	"fav food": checkedFoods // this is an array
}

We use the form elements name attribute values as properties, "name", "bio", "fav color", "gender", "fav food".
And the accessed values as the object's values.
And we have created an object which holds the submitted form data.

Summary

And guys we reached the end of this tutorial.
This is how we get the values from a form with javascript.
I hope you like it.

Source code

Thanks for reading, i hope you find the article helpful.
Please leave a comment if you find any error's, so i can update the page with the correct code.

You can download the source code and use it in any way you like. Get source code

Times downloaded: 707

Buy me a coffee

Buy me a coffee with paypal