Collecting Form Data using JavaScript

in this lecture i will show you how to collect form data using javascript and for the demo purposes i have already created a form here and this form has three text fields so first name last name and email it has one drop down list to select country and this drop down list has three options then we have this gender so this gender is radio button you can select any one gender here all right and then we have these hobbies okay so from hobbies you can select any any number of hobbies because it is a checkbox all right now if you notice these input fields already has some values and i have set these values from html so if i scroll right you can see that for the first name i have set the value john for last name i have set smith and for email i have set johnsmith gmail.com and these are the values you're seeing in these input fields in these you know text boxes then here we have this this drop down list this select you know select element and it has these three options which will see in the drop down list and if you notice here this option canada is selected so i have used this selected attribute to select it and that's why here in the drop down canada is selected alright similarly for the gender if you notice i have used this checked property on this female radio button and that's why here this female radio button is selected and if i scroll down for the check boxes i have used this checked property i mean checked attribute on the last two check boxes so for movies and music and that's why since i have used these checked attribute here for these two check boxes they are selected here in this web page all right now what we want here is we want to get all these data from these you know form fields from this text box and then drop down list this radio button and then we want to use it in our program so we can use it for form validation or for doing some other logical stuffs but in this lecture i will simply show you how you can collect these data using javascript okay and in the next lecture when we will talk about events there i will show you how when you click on the submit button we can do form validation using those data so in this lecture let's simply understand how to collect this data from this form so let's go to script.js file and first i will show you how to collect data from text boxes so let's try to access this first name text box so let's use get element by id method so let's say document dot get element by id and let's go to index.html and let's see what's the id for this text box so if i scroll up here we have this first name text box and its id is fname so let's use that id let's pass it to this get element by id method okay so here we have we will get access to this text box now from this text box we want to extract the value of that you know that text box so for that we can use the value property and it will return us the value of the web value which is there inside this text box and let's store it in a variable and let's also call it fname all right and let's try to log this f name in developer console so console.log fname open developer console let me increase the size here and here you can see john is logged all right in the same way we can retrieve data from last name text box and email text box so let's do that let me copy this code here and let's get access to the last name you know last name text box and for that let's pass the id of this last name text box so let's copy this let's pass this to get element by id method and let's change the variable name to lname and now when i save the changes it should log last name okay so here in the last name you can see the value is smith and that's what is logged here let's do the same thing for email so let's copy this code here let's use it here and the id for the email is email here it is let's copy this let's use it let's pass this to get element by id method and let's also change the variable name to email and when we save the changes johnsmith.gmail.com is logged and that's what is the value in this input field alright so this is how you can get values from a text box by accessing that text box and using value property on it now next let's see how to get value from a drop down list so here we want to get the selected value from this drop down okay and again it's very easy first we will have to get access to this drop down list so let's go here and let's check the id so id is country so let's use that let's say document dot query selector let's use query selector this time and let's pass that id now since we are using id first we will have to use pound sign and then we will have to provide the id okay so here we will have access to that drop down now from there we want to get the selected value and for that we can simply say dot value all right let's store it in a variable let's call it country and let's try to lock this country so console.log country if i save the changes here you can see canada is you know logged here now let's go to index.html and let's change let's remove this selected from here from canada and let's use it on usa okay so in the web page usa will be selected and here in the console you can see it is logging usa so it is returning this selected value all right this value property is returning the selected value from the drop down so you can get a selected value from a drop down by using the value property then we have this gender so let's see how to get the checked radio button from this you know from this gender radio buttons so we want to get the checked radio button and which one is the checked radio button here it is female so we want to get this value from this radio buttons so we want to get the value of checked radio button here now getting the value of a checked radio button it can be a bit tricky but let's see how to do that so let's say document and let's use query selector method okay now to this query selector method i am going to pass input element okay but here in this index.html we have a lot of input elements so which input element we want we want to get the input element whose name is gender okay so we have three input elements whose name is gender so let's first get these three so for that let's pass name equals gender okay so that means we have selected these three input fields and out of these three input fields we want to select the one which has the checked property okay whose checked property is true so for that we can say colon checked okay so it will give us the input field who which has this name gender and which is checked okay it will return as that input field and from that input field and from that radio button we want to get its value all right let's store it in a variable let's call it gender and let's try to lock this gender and let's see if it is displaying the correct output so console.log gender let's save the changes and here you can see female is logged okay so it is displaying the correct value so here you can see in the web page female is selected female radio button is selected and that's what is logged here now let's go to index.html and let's remove this check property from here and let's say let's use it here on this this other radio button when i save the changes this time in the web page other is selected and that value is logged okay so here we are able to successfully access the checked radio button from this gender radio buttons then finally we have check boxes now we can select multiple check boxes as you can see here there are two selected check boxes from this hobbies check box okay so we want to get both of these values so let's see how to get all the selected check boxes using javascript so the first thing which i am going to do is i am going to create an array so an array of hobbies okay and inside this array we are going to store all the checked check boxes then let's get all the check boxes okay uh here we have the check boxes so let's get all the check boxes which has this name hobbies okay and we can do it in the same way so let's write this so let's say document.queryselector okay or let's use another method which is get elements by name and it will return you all the elements by a given name so let's pass this name here hobbies let's copy this let's pass this to this get elements by name method it will return you all the elements which has this name so let me store it in a variable let's call it maybe check boxes okay and let's lock this check boxes to see what it is returning so console.log check boxes all right if i save the changes here you can see it has returned a node list and these node list this this node list has these three elements all right and these three elements are nothing but i mean these three objects are nothing but these three elements okay now from these three you know these three nodes we want to select the one which is checked right so let's use for loop for that so let's say for let's create the variable and initialize it to 0 for i equals 0 i smaller than check boxes okay this checkbox is storing all these three elements so check boxes dot length and i plus plus then inside this for loop we want to check if check boxes of i dot checked is true okay dot checked if it is true then we want to push that check box i mean we want to push that element inside this hobbies we want to push the value inside these hobbies so this check boxes of i will return as the element all right and if it is checked it will return us the checked element okay so we want to push the value of the checked element that checked you know check box to this hobbies array so let's copy this and let's use value property on this and we want to push this to hobbies you know hobbies array so let's say hobbies dot push and let's push this value all right now let's log this hobbies so let's see if it is displaying the correct one so currently movies and music is selected so these values should be you know should be stored in this hobbies array so if i save the changes you can see this hobbies array has two elements movies and music let's go to index.html file and let's remove this check from this second element this checked attribute and let's use it on the first check box if i save the changes now sports and movies is selected okay they are checked and that's what you will see in the array this hobbies array okay so this is how you can access the checked check boxes okay so in this lecture we learned how to retrieve data from a form using javascript in the next lecture we will talk about events in javascript

Channel: procademy

Views: 1,300

Keywords: Collecting Form data, JavaScript, JavaScript Tutorial, Complete Modern JavaScript Course

Id: PQs8mwWmP6E

Length: 15min 39sec (939 seconds)

Published: Sun Jul 04 2021