New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Validating and Processing Forms with JavaScript and PHP
Illustration by

Retrieving data from superglobals


From:

Validating and Processing Forms with JavaScript and PHP

with Ray Villalobos

Video: Retrieving data from superglobals

In this video we're going to take a look at how the data from the form comes into a processing script through the different PHP superglobals. And how you can access different types of data. Before I do that, I want to show you that I've modified the form we've been using a little bit. I've removed some of the fields to make it simpler, and also taken out the JavaScript calls. I've also taken out a (INAUDIBLE) parameters like Required and Pattern, so that we can isolate server-side validation without client-side intervention. Since this is going to invoke server-side validation, I'm going to be working on a live server. I've uploaded these files to an FTP website.
Expand all | Collapse all
  1. 3m 36s
    1. Welcome
      1m 9s
    2. What you should know
      1m 2s
    3. Using the exercise files
      1m 25s
  2. 12m 50s
    1. Understanding forms
      2m 2s
    2. Working with form fields
      7m 4s
    3. Using the form tag
      3m 44s
  3. 19m 23s
    1. Using input validation
      2m 10s
    2. Adding required fields and placeholders
      1m 31s
    3. Constraining numeric and date fields
      2m 32s
    4. Accepting multiple entries
      1m 41s
    5. Limiting uploads by MIME types
      2m 35s
    6. Assisting text input with a datalist
      1m 55s
    7. Constraining with regular expression patterns
      6m 59s
  4. 42m 13s
    1. Accessing forms
      3m 57s
    2. Looking up form elements
      3m 35s
    3. Handling focus changes
      2m 47s
    4. Detecting the onchange event
      4m 31s
    5. Using the selectedIndex property
      2m 30s
    6. Dynamic validation with regular expressions
      7m 0s
    7. Creating a generic input validation function
      4m 31s
    8. Validating in older browsers with Modernizr
      7m 32s
    9. Interrupting form submission with onsubmit
      5m 50s
  5. 15m 20s
    1. Understanding jQuery
      3m 47s
    2. Validating on submit with jQuery
      3m 45s
    3. Building interactive jQuery validation
      2m 34s
    4. Using the jQuery Validation plugin
      5m 14s
  6. 32m 57s
    1. Communicating with PHP servers
      2m 27s
    2. Retrieving data from superglobals
      8m 18s
    3. Using server-side validation
      4m 59s
    4. Adding in-page validation
      5m 22s
    5. Mirroring input data back to the user
      7m 46s
    6. Sanitizing form input
      4m 5s
  7. 43m 29s
    1. Mailing form data
      8m 28s
    2. Understanding file uploads
      3m 1s
    3. Uploading files
      9m 20s
    4. Processing form data with AJAX
      8m 14s
    5. Preparing your database
      5m 50s
    6. Pushing data
      8m 36s
  8. 1m 17s
    1. Next steps
      1m 17s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Validating and Processing Forms with JavaScript and PHP
2h 51m Intermediate Apr 23, 2013

Viewers: in countries Watching now:

Validating web forms is a critical skill for any web developer, ensuring that the data that's submitted is complete, accurate, and nonmalicious before it's sent off to the server. Join author Ray Villalobos in this course as he shows how to validate input from site visitors with HTML5, JavaScript, and jQuery and then process the data with PHP. Plus, learn how to email form data and save it in a MySQL database so that it's ready for other applications.

Topics include:
  • 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
Subjects:
Developer Web Web Design Databases Web Development
Software:
JavaScript PHP
Author:
Ray Villalobos

Retrieving data from superglobals

In this video we're going to take a look at how the data from the form comes into a processing script through the different PHP superglobals. And how you can access different types of data. Before I do that, I want to show you that I've modified the form we've been using a little bit. I've removed some of the fields to make it simpler, and also taken out the JavaScript calls. I've also taken out a (INAUDIBLE) parameters like Required and Pattern, so that we can isolate server-side validation without client-side intervention. Since this is going to invoke server-side validation, I'm going to be working on a live server. I've uploaded these files to an FTP website.

You'll need to upload your own files to your own server if you want to follow along, but you can grab these from the Exercise files. One more change I've made is change the file extension on the form, from .html to .php. A lot of servers require that the file extension for server-side scripts be set to identify the language, processing the script. In the Form code I've changed the action parameter to call script called procces.php, that script is right now empty. Finally the form is using a Get method to send the form information.

If you want to learn more about installing PHP makes sure you check out installing Apache, MySQL, and PHP with David Gassner. You can install a copy of PHP on your local server and run these files locally. want to learn more about PHP itself, make sure you check out PHP with MySQL Essential Training. Finally, if you want to know about uploading and downloading files to a server, make sure you check out Managing and Hosting Website. Let's go back and to our form. So, I'm going to switch over to the process.php document, and I'll start a script by using the less than sign, and a question mark, and then the keyword PHP.

Then I'll close that off right there. And I'm going to execute a function called Var_Dump that just outputs a variable. And I want to output the super global that starts with a dollar sign and an underscore called Get. Put a semi colon here, and I'll save this, and I'll come to the form and type in my name. I'll hit the Send button. And notice that two things have happened. The Var_Dump is outputting all of the data from the form as a series of associative arrays. You can see that, for example, my name is coming in as a string and it has what I put in there.

Everything else is pretty much blank, but you could see that it's all there. Notice that it is also being transferred via the URL because this is a Get method. And the information in the form is being encoded into a URL variable. You can see that it replaced the space here with a plus sign. Right. So, let's switch to a POST method and output the POST for global instead. I'll save the POST method and over here I'm going to switch the method of the form submission to be POST. I'll save this, I'll refresh, I'll backup to my form, refresh the information on the serve and type in my name again. Now notice that it passed along the same data, but it did not pass it in a URL, it simply passed the associative array.

With just the information we needed. There's a third super global you can use and it's called the Request super global. So, I'm going to use Request right here, save it. I don't have to do anything to my form. I'll just hit the back button, refresh this, type in my name. And then I'll hit the Send button. You can see that I got the same information from the form. It's being sent in a POST method so I'm not really getting very much up here. If I switch the Form method to get the Request method, it's going to receive the data either way.

So, the nice thing about the Request method is that it doesn't matter how you tell the browser to send the form. It's going to output the form variables anyways. Since I have the method as Get, it's sending the information in the URL and it's outputting the associative array with all the data. So, let's go ahead and fill out the form a little more. So, I'm going to refresh, I'll type in all this information here. So, I filled out this form completely, and I'm going to hit the Send button, see what we get. Okay, so this time I got a lot more information. And I'm going to copy this text so we can take a look at it on a text editor, in a little bit better format. So, I'm going to grab this, I'll come over here and right after this, I'll paste this.

And then, I'm going to take each one of these brackets and just make it appear on a separate line. So, you can see what's happening here, the Request superglobal is placing everything in an associative array. And the associative array has a set of keys, each key corresponds to what we called it in the input fields. So, this is called my name here, that's the associative array my name here with a string, and it has this data. So, I typed in "password" as the password, and the password confirmation, so that's what it's outputting there. Notice that for the Checkbox field, I received only one of the elements, even though I had clicked on every single one of them, like this. So, what's happening there is that checkboxes can have the same name. So, if we look at the checkbox area right here, you can see that these check boxes each had the same name, Favorite Music.

If you have a checkbox that has a single value, it's okay to give it a normal name. But since we have a checkbox that can have one or three values, we're going to need to pass this a little bit differently. So, we're going to have to modify this Favorite Music variable to be Favorite Music and then pass it as an array reference. So I'm going to save this, and then just resend the form. Before I resend the form, let me see if I can forward it, so I can show you another thing. Notice that, the, reference item, didn't have a value, that's because I didn't choose anything from this pop-up right here.

So, let's go ahead and choose one thing, we'll choose Facebook. Since I modified this form, I need to refresh it and type this stuff in again. I'll click on all these three and pick something from this pop up and pick one of these items. Type in some long text and hit the Submit button, or Send button. So, now we've got a lot more information, let's grab this info, go back to the processing script and again paste it. Go ahead and look for these brackets and you can see that it's passing along the Favorite Music as an array of three elements this time.

Each one, with the items that we chose. The reference now has a value, because I did pick something from the pop up, so this is a lot better. If you want to access one of these values, and print it out, all we have to do is, use the associative array key. So, let's go ahead and switch this code, so that I can output one of these elements, so I'll do echo. Then I can use whichever superglobal I want, and just pass the key to the superglobal. So, I'm going to hit Save and I'm going to hit the Back button, and hit Send.

Okay, so now I get the name and if I want to get anything else, I just type in the name of that item. So, if I want to get the password, I need to type in my password here, I'll save this. And I'll type in a password, and I'll hit Send, and notice that I get the password don't want to save that password so I'll click that off. Out putting something with multiple options, like this, is just a little bit more challenging. So, what I'm going to do now is create a variable, I'll call it, Fav Music, and pass along the request superglobal.

With the name of the key, which in this case will be Favorite Music. I don't need to use the array notation here, I just need to call it by its normal name. Next, I'm going to use a for each method, and I'll pass along the FavMusic array, and I'll receive a key and a value. And for the code right here I'm just going to echo the Fav Music array, and pass it along the key from the for each statement. And then I can put in something like a break character so we can see these on separate lines. So, I'm going to save this and I'll resubmit the form, and now I can see each value on a separate line.

This is the way you would also do a select field that was using the multiple attribute. Now that you know to access the output and data that's passed from the form.

There are currently no FAQs about Validating and Processing Forms with JavaScript and PHP.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Validating and Processing Forms with JavaScript and PHP.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.