Check out a free preview of the full Go for JavaScript Developers course:
The "Submitting a Form" Lesson is part of the full, Go for JavaScript Developers course featured in this preview video. Here's what you'd learn in this lesson:

Brenna uses the http package to parse the data submitted to the todo application form, and summarizes the goals as well as the limitations of the application.

Get Unlimited Access Now

Transcript from the "Submitting a Form" Lesson

[00:00:00]
>> So the next thing we wanna implement is actual functionality for adding a Todo, so let's start in our main function. And so right now, we have something that handles when the browser navigates to /todos. Let's add another route, HandleFunc for when the browser makes a request to /add-todos.

[00:00:23] So when that happens I'm gonna fire the addTodo route handler. And we can define that right above main, so Func addTodo, it still needs our two arguments. So http.ResponseWriter, and r which will represent our http.Request argument. Cool, so the first that we wanna do, if you think about the way your browser is interacting you add a Todo, you add a title, you add content.

[00:01:01] You hit Submit or Send or whatever, save, and then it sends that information with the request to the addTodo list. So it's sending that additional data to our http request. So the first thing I wanna do is grab that request, so r.ParseForm. So ParseForm is gonna do all the dirty work for us, of actually grabbing whatever's coming off of that request.

[00:01:29] So we can actually dig into what was just sent over the wire and so this guy is gonna return one thing. It's just gonna return an error if it returns anything at all, and once again, just as a review, if you're not sure. I have no idea what ParseForm returns, you can look it up, of course, but you could also go to go doc http.ParseForm.

[00:01:52] And you'll see a lot of information about what you can do and you'll see that the function signature, it's a method. So we're calling it on an instance of the request, so our r, and then the name of the method is ParseForm. And the only thing it returns, if it returns anything, is an error.

[00:02:09] Cool, it parses the request body as a form, puts the result into both r.PostForm and r.Form. So you get a lot of information from the documentation, which is helpful. Okay, so we parsed our form, and underneath here, we are going to handle our errors. So if we did get an error back, it means that our form wasn't parsed correctly.

[00:02:29] So if error does not equal nil, We want to send the error along, it should be that error requires r writer. The error itself, the message and we'll stick with StatusBadRequest. Log.Print, Request parsing error and then whatever that error was, just for our own edification, Cool, and so now we wanna actually create a Todo based on whatever was in that form and add it to our slice of Todos.

[00:03:14] So I'm gonna create a variable called todo and set it to a new instance of our Todo struct And our Todo struct has two attributes, it has a capital T Title and so you can use that request and call FormValue. And then whatever the name of that input element is in our HTML is what's gonna be in the parentheses here.

[00:03:42] So if we don't know, we've defined this in our HTML, but we're not sure. So let's hop back over to the HTML and double check, so in todos.html. You'll notice that this input type for title has a name of lowercase t title. So that's what our form is actually looking for, where we're gonna pull this input value from, so we need lowercase t title.

[00:04:01] So back in server.go, the form value we're looking for is lowercase t title and a string. And then the content is r.FormValue, And just because I know that this exists, it is lowercase c content, so now that we have a instance of our Todo. That we've created from the form submission, we can modify our Todos variable.

[00:04:26] So we're gonna redefine Todos with that method append that we talked about earlier. The slice we're starting with is our initial todos which has nothing in it right now. And what we wanna append is that todo we just created. Just for kicks, let's go ahead and print out what we have for our todos, just so we can see what's happening.

[00:04:51] And then because we're not really worrying too much about best practices, we're going to call a redirect. And redirect takes a writer, the response and where we wanna go, so I wanna go back to this todos. We're gonna do a StatusSeeOther for now, so basically what I'm trying to do, is we're appending this to our browser.

[00:05:16] And I just want the page refreshed, so we can see it right away without having to add too much boilerplate code right now. So make sure your file is saved and restart your server. If we navigate over to /todos, we have our blank form. Okay, so when we fired off our forum to add a todo, we got a blank page.

[00:05:47] And you'll notice that at the top here, we're sending our form to the /add-todo, singular. So circling back to the code over here, on line 65, I'm trying to send it to add-todos, plural. So I'm gonna fix that here and restart my server. Then let's navigate back to /todos to get our form, whoops, not home.

[00:06:15] Create a todo, and now we'll see that our form redirects to /todos and we see the todo on the form. So kind of a recap, in a pretty short amount of time, we've wired up a couple route handlers we've handled. Defining both routes and the functions for what needs to be rendered onto our page in very few lines of code.

[00:06:37] So this example was kind of to demonstrate how quickly you could spin up a tiny web server and kind of what you can do within it. A lot of it is a little contrived, we're kind of creating our own todos, handling them locally, which won't persist. But in terms of demonstrating how to start interacting with a browser.

[00:06:54] And parsing in HTML template, that was kind of the goal of this small code-along.