9.4 Form Handling - Video Tutorials & Practice Problems
Video duration:
11m
Play a video:
<v ->In this final section,</v> we'll replace the prompt currently activated by clicking on the button with the proper HTML form. Let's take a look at the browser. So right now, if I click this, it brings up this prompt. But the usual way of submitting information on the web is to use a form. Now in general, to handle form submissions you need a backend framework, something like Sinatra or Rails, or one of the backend JavaScript frameworks. And by backend, I mean something that's running on the server in communication with the operating system and often reading and writing from the database. We can't do that here, but what we can do is listen for the submit event. That's the result of submitting a form and then test that submission for being a palindrome. Let's see how that works. In palindrome.html, let's add in a form. It will incorporate the button. So let's put in here form and we'll move this ID to the form itself. And then inside here, we'll use the HTML text area element to create a nice box for entering potential palindromes. And we're going to give the text area a few attributes. First, we'll give it a name. We'll see what this does in a minute. Let's call it phrase, we'll test this phrase and then we can give it a size. Let's give it 10 rows and 30 columns. Just leave it empty because we're not gonna have a default phrase here. And then we can reuse the button, but this is a specific kind of button. This is a button for submitting form information. And the way to indicate that is with type equals submit. But in the closing tag, and let's take a look at our page. Aha. There it is. You can see this thing is on the same line here. So, to make it look a little nicer, let's put in a break between these. Ah, that's better. Let's go back to the JavaScript code and I'm gonna remove these because they're from an exercise. So I don't wanna propagate those forward. All right, so right now, we're still listening for a click, but what we want to do is listen for submit, from here. It's this. And instead of a prompt here with the string we want the phrase submitted from the form. Right here. Name equals phrase. So there's a way to do this. Using a default JavaScript object called event. The event object is created automatically by JavaScript when an event happens in the browser. We can give it as an argument here, and add it here, get rid of the prompt and have the phrase be a new phrase. Instead of string, it's going to be the value of the phrase submitted to the form. And the way to do that is with a chain event.target. This is the form itself .phrase. This comes from the text area having a name equals phrase, key value pair. And then it turns out that the actual string itself is .value. Like that. Let's see what happens here. Hmm, nothing happened. Now, the reason that nothing happened is that the default behavior for a form is to submit back to the server. But the problem is that there is no server here. Everything is running inside the browser. The way to handle this is with an important event method called prevent default. What's added here is the first thing inside the palindrome tester. So this prevents trying to send the information back to the server which doesn't exist. Look at that, race car is a palindrome. It's working. This is a much more convenient way of putting in text. And I wanna show you one of my personal favorite palindromes. Let's make it a little bigger. This is a palindrome created by pioneering computer scientist Guy Steele using a custom computer program. It's a variation on the theme of a man, a plan, a canal Panama, one of the most famous palindromes and I think it's just great. A man, a plan, a canoe, pasta, heroes, rajahs, a coloratura, maps, snipe, percale, macaroni, a gag a banana bag, a tan, a tag, a banana bag again, or a camel, a crepe, pins, spam, a rut, a Rolo, cash, a jar, sore hats, a peon, a canal Panama. Is it a palindrome? It is. All right, there's just one more thing I want to do before moving on. I'm gonna show you if we submit just nothing. Currently, the palindrome detector thinks that the empty string is a palindrome which it technically is, but that's not really what we want. So, as a special bonus for the screencast watchers, I'm going to solve the exercise in the text. This is exactly the kind of thing that is absolutely perfect for test driven development. We're going to go to our palindrome module, we're gonna write a test asserting that the empty string is not a palindrome. That test will fail. Then we'll get it to pass with the corresponding application code. Let's look at that. Let's open up palindrome. This is the module. Like that. Actually, I do need to go back, don't I? Do this here. Npm test. So it's passing and now it should return false for an empty string. Let's do this here. We can put it down here, anywhere else really. It should return false for an empty string. Empty phrase equals phrase of an empty string. Then we assert not emptyPhrase.palindrome, should be red. All right. And then here, instead of just returning this bullion, the comparison between the process content and the reverse. Let's say, if, remember the empty string is false and anything else is true. So, if this.letters meaning if there are any letters, let's return this thing, else return false. This branch happens when this.letters is empty. So if there are any letters do the normal thing, otherwise return false. Let's see if that works. Beautiful. So this is why I installed version 0.1.0 of mhartl palindrome. It's because the one that's actually out there publicly is version 0.2.0, which already has this correction. So, if you're working on your own module I suggest following the instructions in the text for how to publish this with a new version number and then also update it. In this case, I'll update mhartl-palindrome. Ah, you can see it's actually 0.2.1, currently. Let's take a look here. Aha, empty string is not a palindrome. All right, we've come incredibly far in just four sections from a simple alert all the way to being able to handle a form submission and changing HTML dynamically. As a final step, let's deploy it to the live web. I'm having a little trouble with the cache here. Let's clear an hour. See if that helps. Aha, that was it. So I just needed to clear my cache, load the latest JavaScript from the server and here we go, a working palindrome detector on the live web.