7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 1.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Handle Form Submission

The form that we created in the previous lesson looks nice, but it doesn't actually do anything. In order for it to become more useful, we will need to be able to submit it to the server and have custom code do something with the data. That is exactly what you will learn to do in this lesson.

2.6 Handle Form Submission

So far we have built out the basics of a form, but we haven't been able to present it to the end user yet. So in this lesson, I want to create another route that's going to take us to that particular location so that we can present that form to the end user, and you can start to see what that looks like. So once again, just like we did before, we're gonna come into our routing file, and we want to start to do some of this customization to present that form to the end user. So I'm actually gonna copy this. Let's copy this. Let's drop it down here. And let's paste this, and let's change the name here. We'll call this calculator.greeting, or _greeting because we're going to wind up getting rid of this very soon. So what I want to do is I wanna customize what we have up here at the top so far. So what we want to do is we want to specify a path to our form that we've created so far, so let's just call this form for now. We're going to wind up customizing this and making a lot of this stuff different as we go, but this is kind of what we're looking to do right now. So this is going to be the location of our form, and, now, instead of defining a controller and a name here, we're gonna make some modifications to this. What I wanna do now is instead of defining a controller, I wanna define a form, and the way that I do that is saying _form and then we give it the fully qualified name of our form. So that's gonna be Drupal\calculator\Form\CalculatorForm. Just like that. And in this case, we don't have to specify a method on there, because the form, the fact that we're specifying that this is an _form is going to tell Drupal, hey, this is a form. It's going to extend form base so it has those four functions defined within it, so then Drupal's gonna know how to interact with it without us having to really say too much. One other thing that we can do that we didn't do before is we can add in a title. So we're just gonna call this My Greeting App, or something like that. And we'll leave the permission the way that it is. So let's go ahead and save that. So now what we're doing here is we've added in a new path for a new route here called calculator and calculator_greeting. So what I'd to do is I would like to go my calculator form. I'd like to present the form that we've created so far, and then I would like to pass the logic over to my calculator form. And then once the user has filled out this form and hit the Submit button, I would like to send them over to this route here with name being passed in from whatever they entered into that text box. But before we get too far, let's go ahead and see if we can get that much going. So let's go ahead and come over to our configuration. Let's go ahead and clear our caches. And then once that's done, I should be able to come over here to calculate. And if I were to say form, you're gonna see my greeting app. But we're not seeing anything yet, and why is that? Well, the reason for that is because within our calculator form, we've built our beautiful form here, but we didn't return anything. So let's go ahead and return that form. So let's go ahead and save that. Once again, we will go ahead and clear our caches. We will come back to our website. Let's go ahead and execute that. And there we go. Now that we've refreshed everything, we now get Please enter your first name with a little red asterisk next to it and a text box here. So, if I try to submit this right away, you're gonna see, I get Please fill out this field. And the reason that we're getting that is because we marked that as being required. So as you see, I don't have to do any sort of validation on the form here. I can simply mark it as being required, and the form will kind of just take care of that within the browser. So now if I were to enter something in here like, let's say, Elizabeth, and hit Submit, nothing really happens. And the reason for that is because we're not handling the form submission just yet. So I I was able to enter something in, and it just kind of resubmitted back to this page and gave me back an empty form field. Now what I want to do on that submission, I want to actually do something with that data. I want to redirect the user to my other route, meaning this route right here, and passing in a name so that I can display that name to the end user. So let's come back into our calculate form and come down into our submit form right here. So in this case, I know I'm going to have a name that's been submitted to me with a name or an ID or first name. So that's how I'm gonna be able to get access to the form data that's being submitted. So let's go ahead and set my variable here. We'll just call this first_name in this case so that it's easy to identify what exactly it is. And now this is the place where we're gonna start using form_states. We're gonna say form_state, and we're gonna use a function on here called getValue. And then what we do here is we actually pass in the name or the identifier of the value or the input field that we wanna get the text from out of our form. In this case, I wanna get first_name. So let's go ahead and say I wanna get the value of first_name within my form. And now that I have that, I can do something with it, and like I said before, I basically want to redirect the user to that route that I have named, calculator_greeting, with that particular name parameter set. So let's come back in here and see how we do that. We're gonna, once again, use the form_state. We're gonna use another function here called setRedirect. And now, within here, this is going to want the path, the machine name of the route that we want to send the user to. In this case it's going to be calculator_greeting. And then the second parameter is going to be an array of the different parameters that I want to pass into that particular route. And in this case, remember, I'm looking for name. So I'll come back in here, and I will specify the name parameter to be set equal to my first name first_name variable. Do our semicolon, and then we'll go ahead and save that. So now if we've typed everything in correctly we now have our first name which we pulled out of our form state being the first name of our form. And then we used form_state to set the redirect to redirect us to the calculator_greeting route, passing in a name of whatever the value of first_name was. So let's come back over. We will clear our caches. And then once that is done let's come back to our application. Let's just give it a refresh just for good measure. So let's try to submit again. I'm gonna get that error once again, and this time, let's type in Elizabeth once again. Let's hit Submit. And as you can see here, it has redirected me back into my/calculator/Elizabeth, and now I get a customized reading of Hello there, Elizabeth. So now, you have absolutely learned all the little tricks and tips to be able to create routes, create controllers, create customized forms that we can then tailor and then get submission information from the end user. Do some validation, and then redirect them to some other location where more logic can take place. So this has been very good placeholder-type material. So now in the next final lessons, I'm gonna take you through the process of taking what you've written so far, as far as the routes, the forms, and the controllers, and tweak them to create yourself a nice basic little calculator, so you can separate out some logic and present it to the end user.

Back to the top