Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding forms
- Adding required fields and placeholders
- Accepting multiple entries
- Limiting uploads
- Handling focus changes
- Validating with regular expressions
- Working with older browsers
- Building jQuery validation
- Using server-side validation
- Sanitizing form input
- Uploading files
- Sending form data to a database
Skill Level Intermediate
At the very top when somebody submits the form, it checks to see if each required field has been filled. If it doesn't, it outputs an error beneath each input field. The second thing it does, is check for pattern and placeholder attributes when somebody moves away from an input field. We're going to leave the second part alone. We're just interested in the first part. Right now if everything's hunky dory, it sends the script to the process.php file. That happens right here, when it returns true.
We want to interrupt that and handle the sending of the data ourselves using AJAX. So we're going to change this line right here and add our own posting script. We'll add some AJAX code to send the form to the processor. It's not a lot of code. The first thing we need to do is serialize the form data. When data gets sent over by hitting the Submit button, the data gets converted into a format that the processor can understand. JQuery uses the serialize function for that. We'll store that in a variable called postData. You can find more about the serialize function on this page.
Right here, we'll create a variable called postData. We'll assign it to the form with the ID of MyForm, and we'll serialize that data. So all the input fields will be converted into a language that depresses that PHP file will understand. So now we're ready for the AJAX part. JQuery makes it ridiculously simple. It has several methods including an AJAX method. But since we want to use the POST method for this form, there's a shortcut for that called POST. Here's the documentation field for the POST method. So we're going to use the POST method and in here we'll pass it the processing script we want to use to process this file.
I also need to send the action variable with the value submit. That's because if somebody doesn't hit that Submit button, the information from that button doesn't get passed along. So we need to kind of fake it, so we'll add another ampersand here, and we'll just pass along a variable action, just like the button equals submit. This is how you pass along additional info to your script. Just encode it like a normal URL. Finally, if I want to do something when the processor is done with the form, then I can just pass it along a function. Now this function will return a message.
But it won't take care of the passwords, so I'm going to add that here. Next I'm going to check for the confirmation. I'll copy this line and I'll paste it right here. Finally if the email is successful I also want to send back a message. I'm going to come over here. I'm going to grab this line. Now most of the time this, if else endif notation that you see right here works really well. And I really like it because it aligns things really well. But in this case, this if notation right here that uses the curly brackets combined with this L statement is not going to work. So, I'm going to modify that and just make em consistent. So, I'll move that like this and instead of this curly bracket here, I'll do an end if and that way these won't get confused.