2.2 Forms

Forms are an integral part of any application, because it's the primary way that we interact with the user. We give the user a form, they fill it out, and then we do something with the data that they provided. Now in this lesson, we aren't going to be submitting any data or anything like that. But we will be retrieving the information from the form, because that's really the first thing that we need to do when working with the form. And we aren't going to worry about validation, either. Because let's face it, there are tons of plug ins available for jQuery. There are some very good packages for View, that just make validation a non-issue. So, we're not going to worry about validation at all. Instead, we were just focused on retrieving the information from the form. So we're going to start with our jQuery version. And as far as the form is concern, they are exactly the same as it is right now, and they are very simple. We have a form with an ID of form, we have an email field, we have a message field, and a color field. And each one of these have an ID and a name, just because that's the world that we live in. We have to have an ID for the label, and the name for the data that gets sent to the server. We should just have one, but they didn't asked me, and that's it. Now when it comes to handling which event, you know, because we could handle the click event on the button, or we could handle the submit event. We're going to handle the form submit event, because that's probably the most common thing to do. However, just note that if we were going to handle the button click event, we would need an ID here just for the sake of simplicity, in order to retrieve that element from the dom. We wouldn't necessarily need it, but It would be nice if there was there. But since we're going to be handling the forms submit event, we won't need that. So, let's go ahead and set up that event listener. So we, of course, want to retrieve our form, and then, the submit event. As far as the handler is concerned, the first thing we're going to do is prevent the default from occurring, because that's typically what we would do. We want to prevent the form from being submitted, because we need to perform validation, and all of that stuff. But we're not doing validation, but as far as anything else, I want this to be as true as possible. So, we prevent the default. Then we want to retrieve the values from our form. Now we can do this in a couple of different ways. The first is to use the dom_api, because in most cases we have easy access to the values that we need. We have a text box, we have a text area, and then, we have a select. So, we could easily retrieve those values using the normal dom_api. There are however, for whatever reason, Some controls that we just can't do that with and I have no idea why. So the safest thing to do would be to just use JQuery to retrieve our specific element, because we already have IDs for them. And then, just using whatever method that we need to retrieve the value of that form control. So, we have the email, we have the message. And then we will need to get the value for our color as well. And actually, it would had been easier to copy and paste, so let's do that for the last one. And then, as far as what we're going to do with this data, let's just display it in an alert box. And I'm going to just paste this in, and it's using the new string interpolation feature, because that's just awesome. But it's simply just going to display the stuff that we typed in. So if we go to the browser, and we type in something, it doesn't matter what it is. And I'm going to use blue as my favorite color, we'll click on Submit, and we see that's data, email, message and color, everything is there. So, it is easy but we do have to have an ID. We do have to fill around with the dom in order to retrieve this information. And once again, all of this is completely separated from our mark up. So, if we wanted to see what the actual behavior was, we would have to hunt around for the correct JavaScript file. So, let's look up the view version if this. Well, we wouldn't necessarily need the ID attributes, but once again, in order for the label to work, we do need the ID attributes. However, instead, all we really need to do is add-in a few attributes,and it is simply called v-model. This is going to essentially bind a property to these controls, and these properties are states. Anytime that you have a property that is stateful information. So we can just call these the same names as, well, we already have for the ID and the names. So let's just copy one of those and we'll change the attribute to the v-model, and that is going to be sufficient as far as that is concerned. But we also need to worry about the submit event as well. We want to declare that. So, up here for the form, we'll say @submit because that is our event, but we also want to prevent the default action of actually submitting the form, so we say prevent. And then we specify whatever method that we want, so we can call that sendRequest. So we have some very declarative syntax here, we know that we are, first of all preventing the submit event, and that's as handled by a method called send request. We also know that we have some data that we are going to work with in set of our components, so that we have that readily available. So let's go to our Java Script and the let's just write the necessary code here. So, once again, we want to new up view, and we want to select our form so we will do that with our selector. And then, we need to specify the data that we're working with. Well, we have the email which we can initialize As an empty string. Or if we wanted to initialize it with something else, we could do that as well. But an empty string makes more sense there. We'll do the same for message, as well as for color. So everything is going to default to an empty string. That's going to at least give us our data. But then, we need to define our send request method, because that is going to execute whenever we submit the form. So we will add that to our methods. And this is going to look similar to what we had before, except that we don't have to do all this other stuff, because, since we have bound our form fields to our components properties, it's already there. We don't have to fiddle around with the dom, we have our properties right here in memory, so that we don't have to do any type of fishing at all. So, let's look at this in a browser and we should, hopefully, if I typed everything correctly, see the exact same behavior. So once again, we'll type in an email address, message, don't care, favorite color is missing. So that's something that we would probably want to adjust. Although, we could probably say that, well, we needed to have something already as an empty item in the form, but this is gonna be fine. So let's change this up, let's say that our favorite color is green. So we submit, and nothing happens, that's a wonderful feeling. So there there's a reference error saying request is not defined. So, yeah, it helps if you type it correctly, so, lets go back. Lets enter in our information and then, we should see the same results we had before. So I don't mean to be a broken record here, but as we saw in the previous lesson, and we've see in this lesson, by using view we have much better code in my opinion. Our markup has declarative syntax, so that we have a better understanding of what is actually going on. We have introduced state thanks to the v-model attributes, we now have properties that we don't have to fish for throughout the document. Instead, they are right here readily available, so all we have do is just use them. And so, in the next lesson, we are going to take an existing jQuery plugin, and convert that into a view component.