#45 Reading Form Element Values | DOM & DOM Manipulation | A Complete JavaScript Course

in this lecture we are going to learn how we can read values of different form elements from our JavaScript code so if I go to our application and if we go to apply for loan tab there you will see that we have a form in this form the user can enter his first name last name email occupation date of birth gender and how to contact so basically in this form we have different types of elements we have text input element we have date and time input we have radio buttons we have checkboxes Etc now here we don't have any drop- down list so what I will do is let's go to index.html so here we have apply for loan section in here we have specified this occupation So currently it is an input element but here I'm going to make it a drop- down for that we can use select and in there we can add some options okay so for this select I'm going to specify an ID let's say occupation and then let's specify some options so here let's say government employee let's add another option salaried employee and let's add one more option let's say selfemployed okay so these are the three options now for each of these options we are going to specify some value so for the government employee let's say value is going to be let's use the same values or maybe let's simply specify a value government EMP something like that then here for the second option let's specify the value as salaried and for the third option let's specify the value as self or self employed okay let's save the changes let's go to apply for loan section and now here we have this drop down let's also give a name for this and for the name Also let's call it as occupation okay actually it should be option and not options save the changes now let's go to apply for loan and now it is showing those three values now if you want we can also Design This drop down list so let's go here and somewhere we are designing this input in the same way let's design the select list so let's set these things there as well okay so the same style we are using so instead of doing it like this what I can also do is I can add a comma here and there I can specify select and now we don't need this let save the changes and now it is styled all right now let's learn how we can read the value of each of these different types of form elements from our JavaScript code so what I want is first of all let's go to index.html and let's go to first name input element so there we have specified this value John I'm going to remove this one I don't want any default value here okay and now what we want is whenever this apply for loan button is clicked at that time we want to read the value which the user has entered in these form elements so we have this apply for loan button here so on this I'm going to add on click and to this we are going to assign a function now let's call this function apply for loan and let's go ahead and let's create this apply for loan function in our JavaScript code in our Javascript file so let me go ahead and let me do it maybe in the bottom maybe somewhere here so let's create a function let's call it apply for loan and since we are passing this function as an event handler to this on click whenever the click event will happen an event object will be emitted so that event object we are going to receive for this apply for loan so let me pass that event object okay and we are going to receive that event object here Here Also let's let's call it as event and on this event object since we have learned that this button it is present inside a form if I go to index.html you'll see that that button okay we are not adding it inside if form so it is not present inside if form but still let me actually show you that so here if I say console.log and let's say button clicked let's save the changes here let me open developer console let's go to apply for loan and then let's click on this apply for loan button so here button clicked is logged that means we don't need to prevent the default Behavior but if your button is present inside a form in that case that button will act as a submit button so whenever that button will be clicked it will reload the page okay and let me actually show you that as well so what I will do is all this thing I will put inside a form so instead of creating a div here I'm going to call it as form okay and let's close this form so here let's close that form let me save the changes now and let's go to apply for loan section here we have that form and now when I click on this apply for loan button just notice what happens to this refresh button you see it reloaded and we don't see that console do log statement also so in this case if your button is present inside a form it acts as a submit button and every time it is clicked it basically sends a new request to the server and it reloads the page so to avoid that the first thing which we need to do here is on the event object which we are going to receive for this function we are going to call prevent t default let's save the changes now let's go to apply for loan section and when I click on this apply for loan now now it is not reloading the page and we can see button clicked okay so this is the first thing which we are going to do we are going to prevent the default behavior of a submit button of a button inside a form and then we going to read the value which the user has entered in each of these form elements okay for that we are going to get access to these form element elements so each form element here it has an ID so let's start from top so here we have an input element with the ID F name then for the last name we have the ID L name and for the email we have the ID email so let's go ahead and let's first access these elements for that I'm going to use document. getet element by ID method we want to access first name and it's value so this expression here it is going to give us the first name input element this input element and on that we are going to call the value property to read the value which the user has entered inside this first name input element let's go ahead and let's store it in a variable let's call it f name so this is how we read the value of an input element we access it using get element by ID method or query selector method and on that we use the value property to read the value entered in that field let's do the same thing for last name and email so I'll copy this let's paste it here and here let's change the ID to L name so for the last name input the ID is L name and for the email input the ID is email and let's quickly test it so as you can see we have this error because here we need to change the name so let's call it l name and this one let's call it email and let's quickly go ahead and let's log these values in the console so let's say console.log F name L name email now here I have used the same variable name as the ID of the input elements but that is not mandatory you can name these variables anything but when you're trying to access the Dom elements using their ID this value which you're passing here it must be the element ID name for example in the index.html for the first name input element the ID is f name so I'm using that ID for the last name input element the ID is L name and for the email input element the ID is email so I'm using these IDs in order to access these input elements and to access those input elements we are using get element by ID method but you can also use Query selector method and once we have access to those Dom elements in order to read the value which is entered in that we can use this value property okay so this is how we read the value of a input element using its value property now if we save the changes here let's go to apply for loan and there let me enter some value in the first name in the last name and in the email if I click on this apply for loan button you will see that the first name last name and email has been logged here so in this way we can read the value of an input element so here these three input elements are of type text but if these are of type number or email or anything else since these are input elements you can read their value using the value property now let's learn how we can read the value of a drop- Down list for that if I go to index.html here we have that drop- down list and for that drop down list we are specifying an ID called occupation so the first thing which we are going to do is we going to access this drop- down list this select list using its ID so let's go ahead and let's do that so so again let me copy this line let me paste it here and let's call it occupation okay and in order to access this drop down list we are going to use its ID so let me copy the ID here and let's pass it here okay and this is going to return us this select list and from that select list we want to read the value which the user has selected from that select list so for example if I select self-employed here then we want to read this value and we want to assign it to this occupation property and for reading the value of a drop- Down list also for a select list also we use the value property so now let's also go ahead and let's log the occupation okay and let's quickly test it so here let's input first name last name email and here let's select self-employed and when I click on this apply for loan button you see first name last name email and then the value of the selected option has been displayed here so if you see for self-employed for this value when we are selecting this value for this option the value is self-employed and that has been logged here if we select something else let's say sell read employee and if I click on this apply for Lo button you will see that the value for the saled employee is salaried and that has been logged here when we are logging this occupation so to this occupation we are assigning the value which we are reading from this dropdown list using this value property all right so this is how we read the value of a drop- Down list now let's also see how we can read the value of this date field so again first we are going to access that element for that again I'm going to use document. get element by ID method let's call it date of birth so I'll simply call it as do and in order to access that so this is also of type input as I mentioned in order to read the value of any input whether it is of type date number text anything you can simply use the value property so to access this input element I'm going to use its ID which is DOB so let's pass dob here it will give us access to this date of birth input and from there we want to read the value which the user has selected okay so from here we can select a date and whatever value is selected here we want to read that value so to read that value again we are going to use the value property because again it is of type input so for that we can simply use the value property and with that let's also try to log date of birth so here itself let's also log date of birth but let's save the changes let's go to apply for loan section there let's enter some values let's select let's select government employee here and let's select date of birth here so I'll select simply any date and when I click on this apply for known button now you can see that the selected date is also logged here so it is the same date which we have selected here next we have radio buttons so let's now learn how we can read the value of a radio button now reading the value of a radio button can be a little bit tricky so please try to understand it carefully so if I go to index.html here we have a radio button and if you remember we are grouping together these radio buttons using this name property so when we add this name property we make that radio button mutually exclusive so at a time only one radio button can be selected for example if I select this male and if I select female male will be unchecked and female will be checked if I select do not specify then the female will be unchecked and do not specify will be checked so since we have specified a name property here these three radio buttons are mutually exclusive only one value can be selected at a time and we want to read the value of the selected radio button for that what we are going to do is we are going to use its name property so let's go to our Javascript file so let me also give a comment here okay and now we are going to learn about reading radio button selected element for that again here I'm going to use document do query selector because now what we are going to do is we are going to select all these three input elements so these radio buttons are also of type input so we are going to select all the input elements here so for that here first I'm going to pass input this simply tells that we want to select all the input elements but here we don't want to select all the input elements we only want to select those input elements whose name is gender so we have three input elements here whose name is gender and all of them are of type radio so we need to specify that here so after this input we will use square brackets and there we will say name equals gender so that is the name we are specifying for these three input elements all right so it is going to give us all these three input elements but from these three input elements we only want to select the checked one right so if do not specify is checked we want to get that value if female is checked we want to get that value if male is checked we want to get the value of male radio button for that what we are going to do is after this we are going to specify a colon and we are going to specify that we only want the value of that input element whose name is gender which is checked and for that we can say checked after this colon okay and it is going to return us that value so here let's create another variable let's call it gender equals the value of whatever radio button is selected here let's quickly test this so let's save the changes let's go to apply for loan again I'm going to fill some values here okay and here let's select maybe mail first if I click on apply for loan all right we are not logging the value so let's also log it let's try again let's select mail and let's click on apply for loan button all right here it has returned us that input element so you see it has returned us the radio button where the ID is male so this is correct but after this since it is an input element so we have received this radio button from this radio button we want to get its value so on this one again we are going to use value property so first we are selecting the checked radio button and from there we are reading the value I hope you got it and let's quickly test it now so I'll simply select this radio button and and I will click on this apply for loone button so government employee and gender male is selected if I select female female is displayed here so out of these elements only occupation and this gender is selected that's why only do two values are being displayed here other values are not being displayed but uh if we select other values I mean if we enter value in other fields as well and here let's select do not specify and let's click on apply for loan so now you will see all those values are displayed here so for this gender do not specify the value is none and that has been displayed here that has been logged here so in this way we can also read the value of a radio button the selected radio button finally let's also learn how we can read the value of selected checkboxes so in case of checkbox we can select multiple checkboxes so we want to read all those values let's learn how we can do that so first of all what I'm going to do is I'm going to create a variable I'll call it as contact and this is going to be an array initially let's set it to empty array in this array we are going going to add the value of all the selected checkboxes now in order to get all the selected checkboxes what we are going to do is if you go to index.html and if we scroll down you will see that here we have three checkboxes and for each checkbox we have the same name which is contact so we are going to read all these three input elements based on its name just like how we did for gender or in this case we are going to do it in a slightly different way so here we will again use document dot but this time I'm going to use another method which is get Elements by name and what this method will do is it will return us all the elements with a given name so here let's pass this name which is contact and this is going to return us a node list let me actually show you that so let's goe and let's store it in a variable let's call it maybe contacts okay and let's log it in the console let's save the changes let's go to apply for loan and here when I click on this apply for loan button okay here we have an error cannot read property of null reading value and we have line 132 okay at this line we are getting the error that's because nothing is selected here okay that's why we have this error so what we will do is by default for the radio button we will check mail so here on this radio button I'm going to add checked and now if we go to apply for loan there you will notice that mail is selected by default now let me click on this apply for loan button and you will see that here a node list has been logged and that is being logged at this line when we are logging contacts so this node list it is going to contain three input elements the first input element has an ID phone the second input element has an ID email and the third input element has an ID SMS and these elements are nothing these input elements are nothing but these checkboxes with the ID phone email and sms okay so in this context we are receiving all the three input elements all these three checkboxes okay all these three checkboxes now what we are going to do is we are going to Loop over each of these input elements so here we are receiving a node list a node list is nothing but it is an array so we are going to Loop over each element in that array in that node list for that let's use for Loop let's create a variable let's call it I let's set it with the value zero because the index of n array starts from zero I less than this contacts. length i++ so we have already learned about for Loop how it works so what we are going to do is we are going to Loop over each element of this node list using its index which starts from zero and there we are going to check if that checkbox is checked or not so here I'm going to use if statement and to the contacts so this contact it is storing this node list on that we are going to use indexing and we are going to pass the value of i as an index so for the first element I will be zero so it will return us this input element with the ID phone there we will check if it is checked for that we are going to use this checked property okay so if that checkbox is checked this will return true so if this expression returns true that means if that checkbox is checked in in that case we are going to push it to this contact array so let me give a meaningful name here I'll call it contacts and here let's call it contact elements so contact El and let's use this variable here and here also it should be contact element because this contact element is going to store our node list so if it is checked then to this contacts array we are going to push the value stored in that contact element so we will say contact of I which will give us that contact element on that we are going to use the value property to read its value okay and finally let's log that contacts array let's save the changes let's go to apply for loan section and here let me select phone and email and when I click on this life for loan you will see phone and email has been logged here when we are logging contacts if I select email and SMS you will see email and okay email and email has been logged here I don't know why I think okay here we need to change the value so value for both email and SMS is email so here let's change it to SMS okay so if I select email and SMS it should loog email SMS if I select phone and SMS it should log phone SMS and if we select phone email it should log phone email so in this way we also able to read the value of selected checkboxes so at this line we are reading value of selected checkboxes okay so I hope now you understand how we can read the value Val of a form element using the value property so each input element is going to have a value property using which we can read its value So reading the value of input elements of type text date or select list is simple we just need to use the value property but reading the value of a radio button like we doing here it is a little bit tricky but that's also easy if we can get the checked radio button using this syntax we can simply read its value and to read the value of the checkboxes the selected checkboxes what we are doing is first we are accessing all the checkboxes with a given name then it is going to return us a node list we are looping over that node list using this for Loop and then we are checking from that node list which of the elements are checked if they are checked we are pushing it into an array which we have created here and if they are not checked then we are simply skipping it we are not doing anything so at the end when the loop will complete in this context array we will have only the value of those checkboxes which is checked now here what we are doing is we are currently logging those values but instead of logging it we might want to show it in UI so here the functionality is user can apply for loan by entering his details in this form so once the user will click on this apply life Al loone let's say we want to show a model popup again where we will display the name of the user and we will show him a message that we are going to contact you through the contact option which the user has selected from here so let's learn how we can do that in our next lecture this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 215

Keywords: javascript, es6, es 2016, modern javascript, javascript tutorial, complete modern javascript course, procademy

Id: CrOT4KlR_JY

Length: 27min 33sec (1653 seconds)

Published: Sat Jul 06 2024