Store form data in javascript object
IntroductionWhen working with forms in JavaScript, you'll typically need to convert form data to a JavaScript object (JSON) in order to populate an array, database, local storage, send it to an API, or even consume the data in your application. Conversion between form data and JSON is one of the most common ways to process form data as it opens doors to a plethora of other uses for that data. Show
Note: This app is available as a demo on CodePen. Let's get started by creating a simple HTML form containing several common form fields - two input fields, a text area, and a submit button:
Now, we can take a look at how to convert its data into JSON (JavaScript Object Notation) using FormData API. FormData APIFormData is a built-in browser API that provides us a way to easily access any field form a HTML form. The first step in using FormData API is to obtain the form element using some of the appropriate HTML DOM methods -
For the event listener to work, we must define the function that will handle the
Note: We used the When you run the code above, the result will be an empty object, which is not what we've expected:
Even though it may seem like we've created an empty object, that is not the case. That There are two major ways we can get data from the FormData API - one is to loop through every key-value pair, and the other is to use the How to Convert Form Data to JSON With LoopsThe first way to create a readable object from a
Note: The At this point we can modify the
Now, when we fill out our form and click the submit button we should have the following output:
Check out our hands-on, practical guide to learning Git, with best-practices, industry-accepted standards, and included cheat sheet. Stop Googling Git commands and actually learn it! This object has field names as its keys and corresponding field values as its values. How to Convert Form Data to JSON With Object.fromEntries()Alternatively, we can use the
At this point, our modified callback function will look like this:
An object populated using
Note: For both methods, we can use How to Get Multiple Selected Values in JSON With The FormData APIThe above methods are compatible with almost all form fields - input text, number, radio, select... However, there are other fields that can be a bit more tricky to work with. The most notable one is the checkbox - it allows multiple values to be selected. But the previously shown methods will replace all of those selected values with just one - which is ultimately stored in the resulting object. Let's take a look at how to solve that and store all selected values in the resulting object. Suppose we have an HTML form with a checkbox field:
We can get all the selected data into an array using the
At this point, our code will look something like this:
And the populated object will contain an array of values a user selected in the checkbox field:
Note: You can check out this live demo on CodePen which uses all the major form field types and generates the data as a JavaScript object when submitted. ConclusionIn this article, we've taken a look at how to use the FormData API to convert form data to JavaScript objects without any additional dependencies. We've also learned how to correctly handle various types of form fields (inputs, textareas, etc.), as well as some trickier ones such as checkboxes. What is FormData object in JavaScript?The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest . It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data.
Can I send object in FormData?Yes you can, you can append to formData objects.
How can we store FormData in database using JavaScript?Use Case: Create a New Order. Define Queries. We will define two queries. ... . Generate XML Schema. ... . Create the Form. ... . Link to the Database. ... . Define the SQL Query. ... . Generate an XML Schema. ... . Create the Form. ... . Link to the Database.. How do I save a JavaScript form?let saveFile = () => {. // Get the data from each element on the form.. const name = document. getElementById("txtName");. const age = document. getElementById("txtAge");. const email = document. getElementById("txtEmail");. const country = document. getElementById("selCountry");. const msg = document.. |