Submitting with JavaScript

[00:00:00]
>> Jen Kramer: This is okay user experience. But it feels kind of odd to suddenly go on to a page like this that's completely blank with just this tiny little bit of text on. Wouldn't it be nice if we actually stayed on the web page itself? And maybe it could give me a message that, the message was sent or that something was required, and maybe a few more words to make it sound a little bit more polite and nice, other than these very terse messages that we we have here, that are coming from the script itself.

[00:00:30]
So Lanie has written us a scrip that is going to display for us those error messages in a much nicer sort of way and handle submitting that information to the server. And so, to include that JavaScript on our web page, I've given you the little snippet of code here.

[00:00:48]
Later on in this course, when Brian Holt takes over and starts to talk about JavaScript, you'll learn much more about how to write scripts like this and how to include them in your web page. But for right now this is what you need, this little tag it's called the script tag.

[00:01:01]
And there's a source associated with it, just like there is for an image tag. So this is a way of connecting that JavaScript file into your HTML. Typically JavaScript links like this will either go in the head of the document, or they'll go down just below the very bottom of the document just before the body of the document closes and often the developer will specify where this needs to go.

[00:01:25]
And so this is going to go down at the bottom of the web page. So let's go ahead and place that there. So scroll all the way down in your HTML to just before the slash body tag. And you can go ahead and paste that script in place.

[00:01:40]
Make sure you have that script available to you. It should be in your begin folder, you should find a folder called JS and you should find a file called forms.js inside of that. So that would be something that would cause it not to work, if you have it in a different place.

[00:01:56]
Go on ahead and save that.
>> Jen Kramer: And now when we refresh the web page.
>> Jen Kramer: Now we should be able to go on ahead and order our abduction experience and you'll see here that we have a much nicer dialog box in the page that says the order has been received, check your email.

[00:02:18]
And if for example, I hadn't entered an email address and tried to submit this form, I could get an error message that looks like this. We have a problem, please provide your email address.
>> Jen Kramer: So hopefully that worked out okay for you as well, so that is how we're going to go about adding some processing to our form script to actually make it do something.

[00:02:41]
Now go check your email and see what you sent yourself.