Gather form data

- [Narrator] There's several ways to gather the form data that we want to send in our Ajax request. And there're are pros and cons to each one that we might choose. First, we could just simply use JavaScript to go and find the attributes that we want one at a time. We go and locate them, we get their value, we put it together in a string. That's certainly a very reliable way to do it and that's a good way to do it with small forms but it becomes very tedious if we have to work with lots and lots of attributes. Right, We would have to keep going back over and over. So a better way would be to try and write a bit of code that we could reuse. Bit of code that we could just say "go get all of the form attributes, "and return all those attributes to me "assembled and ready to go" so that we can pass them to our Ajax request. So we might try to write some custom code of our own, that would loop through a form, looking for all of it's elements, and gathering up all of those attributes with their values so that we could submit them. That's a perfectly valid way to go. There's also another possibility which is that because this is a common need there's a lot of third-party libraries that perform this task for us. You could certainly search on the internet for the ability to serialize a form. That's the term that's used for gathering up all those attributes. And jQuery actually includes serialize in the jQuery library. So if you're using jQuery, that's already built in for you. And then the fourth possibility that there's a special class called FormData. And it's a class that was added to Ajax or to the HTMLHttp request specification as Round 2. We call that XHR2 for short. And it kind of went together with HTML5. So browsers that support HTML5 and XHR2 will have the form data class available. And this makes the process very easy. We'll see how that works in a moment. Most modern browsers support FormData. It was added over five years ago. However, it does not work with Internet Explorer 8 or Internet Explorer 9. So if you need to still support older browsers like that, then that won't be an option for you. You'll have to one of the other options. So that option only works if we don't need to support IE9 or earlier. If we're really focused on just modern browsers then we can use the FormData class. Let's look at option number two and number four in a bit more detail. So to gather our form data here, what I'm going to do is I'm going to have, var form_data, equals to I'm going to write a custom function called, gatherFormData. The idea is that it's going to take a form as an argument, and then it's going to loop through that form looking for all of those inputs that we've got. So up here above, calculateMeasurements, I'm just going to paste in a function that we can then look at. GatherFormData, we pass in a form, it takes the form, it gets elements by their tag name, looking for input. It takes all of those inputs then and loops through them, one at a time, using a for loop. And for each one it takes the name, the value, and puts an equal sign between them. And it put those all into an array, I've just called it array, and after it puts them all into the array, then at the end, we join the array together using an ampersand. And that's what we return. That would give us exactly the kind of string that we're looking for. Let's try it out. Let's save our page, and let's open up our page, ajax_form, is what we want to go to. Here's what our form looks like. We've got length, width and height. I've got my HTML submit button, and my Ajax submit button. So let's hit 2 times 2 times 2. So the volume of 2 times 2 times 2, ought to be 8. That's what I expect to get back. So I'm going to click Ajax submit, here we get the total volume is 8. And the console tells me the result that came back was 8 as well. So that's correct. Let's try another one. Let's try 3, and let's try 4 and 5. And we get back 60. That's the total volume. So that works, and it's a perfectly valid approach. But, notice that I have a comment up here that mentions that this only works with input fields. It omits textareas, select-options, checkboxes, and radio-buttons. It only looks for this type of tag, and our form might have lots of different things. Now we could write more advanced version of this. Those are certainly out there on the internet. You can browse them or you could write your own. And we could go through and we could look for those other types of things. Instead of looking by TagName we could go through all of the form's elements and loop through it's elements, and add up all the values that way. And that would work. But at that point, you might be better off looking at some third-party libraries. Things that have all that complexity already built into them. Instead, I'm going to leave gatherFormData here for now, but I'm going to come down here now and we're going to try the other approach that we talked about before. And that's the FormData class. The way that we use it, is we just call new FormData. It's a new JavaScript object, just like we called new XMLHttpRequest. We call new form data, and we pass in our form and guess what it does. It goes through, and it loops through all of the elements gathers up all those different elements, gets them ready for us to send. Before we try it, I just want to add an extra bit of code here that's just going to loop through the FormData entries. And for each one it'll just log its key and its value. So we can see what those look like. So let's save this. We're no longer calling our gatherFormData function, instead we're going to create a new FormData object and pass it in our form, so that it can do all of that for us. Let's save our page. Let's reload the page so we get new JavaScript. And let's try 2, 2 and 2. Ajax submit. Okay we got back length 2, width 2 and height 2. You see those values, those entries there? But wait a minute, our total volume is zero. What happened here? So here's the thing about FormData that you have to be very careful about. Which is that FormData is a fairly advanced way of dealing with form data. And it allows us to attach files as well. That's something that's a little bit trickier to do. Because we can't use x-www-form encoded as the content type when we have files. So, whenever we're gathering our own attributes, we do want to set the request header to form-url-encoded. But, if we're using FormData we want to comment that out. Do not set content-type with FormData, alright. It's going to set things up the way that it needs them to be set up. So just leave that out and let's go back and try it again. We'll reload the page. Let's try 2, 2, and 2. Ajax submit, the volume is now 8. Now it was correctly able to encode those values and sent the PHPs. So PHP could work with them. So certainly, the easiest way to work with FormData is with this FormData object. Unfortunately, it's not supported by IE9 or earlier. In which case, you would either want to write your custom code or go looking for third-party libraries that can make that happen for you.