Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So far, we've been processing the fields in a separate PHP document. Another option is to make the form and the processor be on the same page. That makes it easier to provide on-page feedback. So, in this video, I'll show you how to move the form from our external script to the current page. I'm going to make some changes to the form first. To be a little bit more secure, I'll change the method of this page to Post. I'll change the Action field so that the form submits to itself. We could just use the name of this page as the action, but I'll use another PHP superglobal called Server to make the form submit to itself. So, right here I'm going to create a short PHP script. It'll just echo the superglobal server and it'll pass along as the parameter php underscore self.
So, I'm going to save that and if I refresh my page. So, if you take a look at the source code for this page, you can see that the action is the same as the URL for this form. I'm also going to modify the button at the bottom of the screen so that it passes along a name and a value. We'll use that to test out the form has been submitted before we process it. So, I'm going to skip all the way to the bottom and find my submit button and add the name, action, and the value submit. So, save that. Now we can make sure that the form has been submitted with the Post method, and that it's received an action parameter.
So, I'll skip all the way back up to the top, and I'm going to add a little PHP script here as well. And here I'll make sure that the request method we get back from the server is set to Post. And also that the action field that we received from the form is not empty. And then, I'll end my IF statement. I'm going to save, and refresh my page to make sure we don't make a mistake. It's always a good idea to type a little bit of the script, and then just refresh your pages to make sure you don't make any mistakes. If you do, it will look something, let's go ahead and delete one of these parenthesis.
And if you save that and you try it, it's going to give you this kind of error, depending on how your server is set up for error reporting. So, let me save that, refresh. Now we're ready to move the script from our separate page into this page. So, I'm going to go to my process.php script and just grab most of the content from right here. I'm going to copy, I'm going to leave this page alone, and I'll close out, and then I'll paste this code right here. And I'll go ahead and indent it a little bit. So, I'm going to save and come back here and just try to submit the form without filling any fields. So, you see the errors are coming up just fine, they don't have any styles and they're not within the form.
That's easy enough to fix. It would be a little bit nicer if the errors were right underneath the fields that they belong to. To do that we're going to create a series of variables, and feed the text of the errors into those variables, and then print them underneath each input field. So, instead of just echoing everything, I want to create an error variable called err_MyName and set it equal to the error that we get from the form. Now I want to add the class right here and I could just add class equals and then in double quotes. But because I already have the double quotes right here, it may cause a problem.
So, I'm going to delete the outside double quotes here and replace them with single quotes. That way when I use double quotes inside, it won't be a problem. So, the class for this is going to be error and I'm going to to do that to all the other errors. So, I'm going to save this, and I'll refresh my page and none of my errors are printing out right now because they're just being stored in variables. So now I need to put those variables underneath each input field. So, I'm going to look for the Name input field, and right underneath that, I'm going to create a PHP script. And if the variable exists, I'll use the If Set method, of each one of those variables.
Then I'll echo the value of that variable to the screen. So, I'm going to save this, and just test it out by refreshing the page. And if you had filled out the form before, the error should come up just fine, right underneath the element. So, all we gotta do is take this and copy it a few times with the different variable names. So, the pattern match would also happen right here by the name, and the password feedback would happen, right here for the length. And I'll put the other one in the confirmation section.
So, I'm going to save this, and try to submit the form and I get all of my errors. Let's try to submit the form, filling some of the fields out. So now, I don't get the field that says that this is a required field, because I did fill it out. But it still gives me the second error that I didn't put it in the right format. So, let me put it in the right format, I'm going to hit Enter to submit. So, that's working pretty well, let's try the other one. So, the password, I'll make the password, password and I'll hit Send. It's telling me that it doesn't match, because I didn't fill out the other field.
So, by moving the form into the page, we were able to add some feedback from the script directly into the form. So, we have a small problem and that is that after the user submits the form. Any fields they have already filled out will disappear. We'll take care of that in the next movie.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101167 Viewers
61 Video lessons · 87925 Viewers
71 Video lessons · 71806 Viewers
56 Video lessons · 103670 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.