por JavaScript is a fundamental programming language for web development due to its extensive native methods and objects, which allow us to interact with the HTML elements of a project. In this post, we will teach you What is and how does the FormData object work in JavaScript?essential to interact with the data of a form.
What is FormData in JavaScript?
FormData in JavaScript is a native class of this programming language that allows us perform form validations and bring data from these components. In this sense, it works as a kind of form controller.
To help us control the behavior and data of a form, the FormData class in JavaScript receives the HTML node, which contains this component form. On this node, the class allows us to execute various methods.
There are other methods to interact with the behavior and data of a form. These are executed directly on the node. form. If you want to learn more about them, we recommend the article on validating forms using JavaScript from the Mozilla Developer Network. This article is a great tool when we are struggling with form validations in vanilla JavaScript.
How does FormData work in JavaScript?
As we mentioned before, the FormData class in JavaScript allows us to execute various actions on a form. Next, we will teach you how to use this class to bring data from a form.
To use this native class, the first thing we will do is declare a new instance and save it in a variable of type const. Inside this instance, we will pass the HTML node of our form, which in our case is saved inside the variable formElement:
const formData = new FormData(this.formElement)
If you have doubts about the idea of a new instance, we recommend reading our post on classes and instances in JavaScript.
Now that we have saved this new instance in a variable, we can use the name of this variable to execute a method get and bring specific data of the element form what we have been through.
So, assuming we want to bring data from a input with the property yam and the value «textInput», we can execute the method get of the FormData class on this inputselected with your yam. Next, we show you how do we execute this action and save it under the constant call username:
const username = formData.get(‘textInput’)
Now, if what we have is a form like the one in our post about creating an HTML registration form, which has three inputs (one for user, one for password and one for repeated password), we could replicate the previous line of code and create constants to access the data of each input.
Next, we show you how we would use the FormData object in JavaScript to access data from different inputs:
const username = formData.get(‘textInput’);
const passwordInput = formData.get(‘passwordInput’);
const passwordMatchInput = formData.get(‘passwordMatchInput’);
If you want to test the operation of the previous lines of code, we invite you to insert a line of code debugger after them to review it from your browser’s inspector. This will allow you to define a stopping point in this code to review it. Once this is done, you can Hover your cursor over the constants you have declared and see the message of their content.
In the context of this post, using a FormData object in JavaScript can be useful for many exercises. One of them would be to access the content within a input password to validate it. In our post about the 6 actions to execute on a registration form, we mentioned that you can define character parameters in your inputs or validate repeated passwords. For both actions you will need to review the content of the inputs, something very easy to do with this FormData object in JavaScript.
Do you want to continue learning?
By reading this post, you have learned exactly what the FormData object is and how it works in JavaScript. However, There is still much to learn about this powerful language! For this reason, we recommend our Full Stack Web Development Bootcamp, an intensive training space where you will learn in depth about JavaScript, HTML, CSS and much more. Do you want to continue learning with us to become a professional and stand out in the IT job market? Request more information now and discover how you can change your life in a few months!