[MUSIC] Hi and welcome. In our last two lessons, we've been focusing on a new and somewhat more complex form than we've seen in the past. In this lesson, I'd like to conclude my discussion by talking about the button we're using to process the form. So here are our results from last time and we have a button called Order Now. This is actually technically not a button but a span that is sort of decorated with CSS to look like a button. But we could use an actual button if we wanted to. If we scroll to the bottom, where we can see on line 47 our button, we have a table row. And in this case, unlike the others where we have three table data elements, here we have just one. And this table data element has an attribute called colspan of 3. This means that this element will span the entire table, since the table has three columns. And we have here within the table data a span and that span has the text Order Now. Like many other HTML elements, the span can have an onclick and I've given them the onclick the function calcOrder, which we looked at in our last lesson. And calcOrder is what produces this output based on the user's input. Notice here, though, we aren't using the input type submit. Let's look at that by scrolling down just a bit where I have it on line 55 in a comment. Now you'll recall from our previous lesson that this is an HTML comment where we have the less than and greater than symbols, rather like any other tag in HTML. But then just inside it, if we have an exclamation point, two dashes, and then close this one with two dashes. Everything within these two comment ends will be only for our reading, it will not be rendered at all by the browser. So I've stuck this here and this is what an input would look like if it was a submit, input type submit, unlike type text that we've seen before. And a value of submit, which would give the submit button a name with submit. So let's, Let's take this out and try it. And we will, Overwrite our current span. We'll save the table data. Like so. And now, Let's put this back. Now we should have a new button which is of type submit. When we refresh. And notice here we have a submit button. And it's no longer centered because it isn't using the CSS from the previous button. But we have it here and we can try it out and see how it works. Now I'm going to put in the same values I've been using. And notice these are validating. Use 5 and then we'll submit. Now, I want to point out, this is not going to work. And what I want to do is show you what happens so you can avoid using a submit button until you're really ready to do some server side development and have somewhere to actually submit your form outside of the browser. So, when I click this, notice that what I've got up in my URL is a question mark and then the name of the first field and my input, which was Fred. And then an ampersand and the name of the second field, which is last name, and my value, which was Smith, and then the same with the phone and the value of the phone and so on. Now all of this information is what our form would now like to send to the server because we have used a submit button. And this is specifically a button of type submit. So the reason we were using a span or any other clickable item that didn't have a type equal to submit is so this effect doesn't happen. Of course, when we actually have a server and we want to submit our form to the server and perhaps have the data go to a database, then we would want you to submit but in that case. But our course is about client side development and so we're trying to avoid this complication since we don't have a server for this example. But later if you pursue what is often called full stack development, you will have a server side as well where your submit button can submit this data in this form to a program that can process it. So that's all for this lesson. In our next lesson, we'll continue to look at some of the additional features of JavaScript.