Save user form input data in a JavaScript object

hello everyone and welcome to this tutorial so today I'm going to be showing you how you can extract user input from a form and store it in a JavaScript object without having to select each of the input elements individually now as you can see I've prepared a form already and if we take a look at the underlying markup you can see that there are two input elements of type text and a select element with three options and then finally a button of type submit now for the method I'm just about to show you there are two important prerequisites the first one is that all of the user input elements should be embedded inside a form element in your markup and the second is that for all of the user input elements in your form a name attribute and a value should be assigned so in this one I've got first name last name and for the select element JS difficulty if you don't include a name a tribute for a user input the method I'm about to show you will still work but that particular item will be emitted from the object okay so now in my JavaScript I've already selected the form element what I want to do next is to add an event listener to that form and I'm listening out for a submit event on the form and that's going to generate an event object and the first thing I want to do inside this function is to call prevent default on the event object in case you're not familiar this prevents the default HTML behavior of trying to submit the form itself which involves a page refresh we don't want that because we're handling the form data with JavaScript okay so now for the processing itself so the first thing we can do is lean on the inbuilt form data object to help us gather all of the user input in the form and store it in a data object so to do that we want to create a new instance of the inbuilt form data object you do that by using the new operator before calling the form data object and in the parentheses you want to pass in the form element so this will create a new data payload for chorus and I'll save the result in a variable I'll call it FD and we'll take a look at that in the console so if I quickly fill in some information here now if I expand what I've logged to the console you'll see that there's not much going on here you just see the Prototype of the form data object containing the methods that you can call on the form data object now the data it does actually exist on the form data object but to access it you have to apply an iterative method to the form data object so for example I'm going to create a for off Loop here where I'm iterating through each item inform data and a log each item to the console so I have to fill in the form once more now the good thing about this data structure is that JavaScript actually has an inbuilt method that can convert an array of arrays into a JavaScript object in a single line so in the new object the property keys they are going to be the first item in each of the arrays and the property values are going to be the second items okay so back in the script I'll delete the loop that we just ran so the method you're looking for here is object Dot from entries and you pass in the array of arrays so in this case it's the form data object and that's going to return a JavaScript object and I'll log that to the console so we can see the result there's a JavaScript object here with the form input data stored in key value format now in case you want to send this data to a server or pass it on to another page in your form what you probably want to do is to convert the data object into Json format so to do that you can call json.stringify [Music] which accepts a native JavaScript object and it's going to return that object in Json string format so what I'm going to do in this example is to pass this data on to another page so that it's available there and I'm going to do that via local storage so to save the data in local storage I need to call the set item method so the set item method accepts two arguments the first one is the key under which you want to store some data in local storage so I'll give this a key or form and the second is the data itself so I pass in here the Json object that I created now in case you're not aware you can only store string data in local storage and be able to store a native JavaScript object so with this line of code I'm storing the data in Json format in local storage what I want to happen next is to be taken to the next page in my form where I can retrieve that data so I've already created a page in the same folder called confirm .html so what happens on the confirm page is I retrieve the data from local storage using the key that we gave to it I then convert the data from Json back to a JavaScript object using the json.pass method and then I'm iterating through that object using a four in Loop and each time I'm extracting the key and the value from each property creating some markup out of it and then writing that markup to the Dom using the inner HTML method so that markup is written into this element here so let's see this in action thank you so as you can see we're now redirected to the confirm page and the data from the form on the previous page that we stored in a JavaScript object is now retrieved on this page via local storage so this is how you can make the JavaScript object available on the next page of your form if you have any questions feel free to post below and if you did like this video please don't forget to hit the like button because that helps with the algorithm helping others to find the video and if you would like to see more content like this in the future don't forget to subscribe to the channel

Channel: OpenJavaScript

Views: 36,330

Keywords:

Id: 7LGpIQ6ceJs

Length: 7min 10sec (430 seconds)

Published: Tue Oct 04 2022