1 00:00:00,480 --> 00:00:06,390 The next thing we need to do is use JavaScript in Ajax to display the status of our registration request 2 00:00:06,990 --> 00:00:14,650 after our HP script is processed it note that we have not yet created the actual HP script. 3 00:00:14,720 --> 00:00:22,910 We'll do that in the next lesson the HP script will transmit a success code or error codes back to our 4 00:00:22,910 --> 00:00:25,250 registered IP HP page. 5 00:00:25,340 --> 00:00:31,940 We'll use ajax to interpret the codes and display a success or error message without the user having 6 00:00:31,940 --> 00:00:33,410 to refresh the page. 7 00:00:34,580 --> 00:00:38,150 You can see an example of this on the completed version of the web page. 8 00:00:38,660 --> 00:00:42,590 If we leave the fields empty and click register we get an error message. 9 00:00:42,590 --> 00:00:45,150 First name is required. 10 00:00:45,240 --> 00:00:51,260 There are multiple interstates in one successfully the validation will include the following 11 00:00:53,980 --> 00:00:57,440 will check to see if the email address is already in the system. 12 00:00:59,210 --> 00:01:05,860 We'll make sure the first name and last name email and password fields are completed we'll also check 13 00:01:05,860 --> 00:01:08,100 to make sure the email is in the right format. 14 00:01:18,150 --> 00:01:23,740 And you can see that is a complete each field the ear state changes 15 00:01:36,730 --> 00:01:38,440 once all the fields are completed. 16 00:01:38,470 --> 00:01:44,800 I can click the Register button and account will be processed and we're taken back to the index page 17 00:01:45,600 --> 00:01:51,490 so you'll notice that after the account is processed we are redirected to another page and so that's 18 00:01:51,490 --> 00:01:52,960 what we're trying to do here. 19 00:01:57,550 --> 00:02:01,190 So let's go ahead and get started. 20 00:02:01,260 --> 00:02:06,690 The first thing we need to do is move our J query dog yes file. 21 00:02:06,870 --> 00:02:09,960 It's actually located down here. 22 00:02:10,010 --> 00:02:24,080 We're gonna have to bring that up into our head take. 23 00:02:24,320 --> 00:02:29,520 And the reason we do this is because we need to load the J query library before the rest of the page 24 00:02:29,520 --> 00:02:33,450 loads in order for this to work. 25 00:02:33,460 --> 00:02:40,180 Now we can create our javascript code and use ajax to communicate with our HP script. 26 00:02:40,330 --> 00:02:44,440 And remember that we'll be creating the HP script in the next lesson 27 00:02:47,720 --> 00:02:50,120 I'll insert the javascript code. 28 00:02:50,120 --> 00:02:53,540 It's a bit lengthy but I will explain exactly how it all works. 29 00:03:14,310 --> 00:03:20,910 And before I go through the script remember that we gave each one of our form elements an I.D. we gave 30 00:03:20,910 --> 00:03:28,000 the register button the idea register the name the IDF name and so on and so forth. 31 00:03:28,170 --> 00:03:35,600 You can see here that the 1st I.D. we've referenced is the register I.D. The Register I.D. was attached 32 00:03:35,600 --> 00:03:42,680 to the register button so when the register button is clicked you can see the on click event we store 33 00:03:42,680 --> 00:03:54,280 the values of f name l name email and password the values of those inputs are stored into four new variables 34 00:03:54,850 --> 00:03:57,530 f name l name email and password. 35 00:03:57,610 --> 00:04:06,150 We then use ajax to transmit the values to our PSP script using the post method and remember with Ajax 36 00:04:06,160 --> 00:04:08,300 this is all done behind the scenes. 37 00:04:08,440 --> 00:04:14,310 The HP file that we'll be creating in the next lesson is called Ad user dot BHP. 38 00:04:14,380 --> 00:04:22,210 And here we've specified the data that we're transmitting the first name last name email and password 39 00:04:24,410 --> 00:04:25,840 once the data is submitted. 40 00:04:25,850 --> 00:04:33,780 The PDP script will validated to make sure it meets the requirements we'd set out earlier so the validation 41 00:04:34,680 --> 00:04:42,070 the BHP script will output error codes or a success code depending on the results of the validation. 42 00:04:42,090 --> 00:04:51,850 For example if the PDP script outputs the code true so if each GMO equals true we've set an alert to 43 00:04:51,850 --> 00:04:59,110 appear with the text account processed and you can see that that text will be contained within a div 44 00:04:59,530 --> 00:05:09,650 the alert is displayed in a div with the I.D. add underscore error to so we haven't created that yet. 45 00:05:09,660 --> 00:05:15,060 So let's go ahead and create this div which will contain all our status messages 46 00:05:18,040 --> 00:05:19,810 so that's what the status message looks like. 47 00:05:25,100 --> 00:05:32,930 So we need to scroll down and it's located directly underneath the registration form heading. 48 00:05:33,080 --> 00:05:35,150 So I need to scroll down. 49 00:05:35,150 --> 00:05:35,750 Here it is 50 00:05:39,940 --> 00:05:48,040 and you're going to add the following line of code directly below this. 51 00:05:48,390 --> 00:05:56,520 So that's where our error messages will be contained so scroll back up once the account is processed. 52 00:05:56,600 --> 00:06:01,820 We have a redirection so the user will be redirected to the index page. 53 00:06:01,820 --> 00:06:05,900 Now let's say the account was not processed successfully. 54 00:06:05,900 --> 00:06:07,720 This could be due to a number of reasons. 55 00:06:08,820 --> 00:06:16,590 First if the PDP script outputs the text false it means that an email address already exists in the 56 00:06:16,590 --> 00:06:17,880 system. 57 00:06:17,880 --> 00:06:23,130 For this reason we would output the message email address already exists. 58 00:06:28,570 --> 00:06:36,490 If on the other hand the HP script outputs the text f name this will mean that the first name field 59 00:06:36,580 --> 00:06:40,510 was left empty and so will output the message. 60 00:06:40,520 --> 00:06:41,740 First name is required. 61 00:06:43,570 --> 00:06:53,210 And it's the same for L name e short which means the email address was left empty and P short which 62 00:06:53,210 --> 00:06:55,380 means the password was left empty. 63 00:06:55,430 --> 00:07:00,450 E format will mean that the email address was in the wrong format. 64 00:07:00,530 --> 00:07:07,910 These are user defined codes so this is what we've decided to use in the BHP script. 65 00:07:07,910 --> 00:07:13,320 We could have set the error code to anything we wanted but you'll see that in the next lesson. 66 00:07:13,340 --> 00:07:18,180 Now lastly we have an L statement that will display a general error message. 67 00:07:18,260 --> 00:07:22,120 If the form was not processed what the reason was unknown. 68 00:07:22,160 --> 00:07:29,570 So for example if none of these reasons are applicable we'll just display a general message and this 69 00:07:29,570 --> 00:07:35,750 could be due to a number of factors such as connection issue and things like that the before send function 70 00:07:35,750 --> 00:07:41,280 here displays the word loading while the form is being processed. 71 00:07:41,280 --> 00:07:44,970 And this typically takes only a fraction of a second. 72 00:07:44,970 --> 00:07:51,380 So sometimes you don't even see the loading text and that's how the javascript works in the next lesson 73 00:07:51,390 --> 00:07:54,960 we're not going to create the BHP script.