The next thing we need to do is use JavaScript in Ajax to display the status of our registration request
after our HP script is processed it note that we have not yet created the actual HP script.
We'll do that in the next lesson the HP script will transmit a success code or error codes back to our
registered IP HP page.
We'll use ajax to interpret the codes and display a success or error message without the user having
to refresh the page.
You can see an example of this on the completed version of the web page.
If we leave the fields empty and click register we get an error message.
First name is required.
There are multiple interstates in one successfully the validation will include the following
will check to see if the email address is already in the system.
We'll make sure the first name and last name email and password fields are completed we'll also check
to make sure the email is in the right format.
And you can see that is a complete each field the ear state changes
once all the fields are completed.
I can click the Register button and account will be processed and we're taken back to the index page
so you'll notice that after the account is processed we are redirected to another page and so that's
what we're trying to do here.
So let's go ahead and get started.
The first thing we need to do is move our J query dog yes file.
It's actually located down here.
We're gonna have to bring that up into our head take.
And the reason we do this is because we need to load the J query library before the rest of the page
loads in order for this to work.
Now we can create our javascript code and use ajax to communicate with our HP script.
And remember that we'll be creating the HP script in the next lesson
I'll insert the javascript code.
It's a bit lengthy but I will explain exactly how it all works.
And before I go through the script remember that we gave each one of our form elements an I.D. we gave
the register button the idea register the name the IDF name and so on and so forth.
You can see here that the 1st I.D. we've referenced is the register I.D. The Register I.D. was attached
to the register button so when the register button is clicked you can see the on click event we store
the values of f name l name email and password the values of those inputs are stored into four new variables
f name l name email and password.
We then use ajax to transmit the values to our PSP script using the post method and remember with Ajax
this is all done behind the scenes.
The HP file that we'll be creating in the next lesson is called Ad user dot BHP.
And here we've specified the data that we're transmitting the first name last name email and password
once the data is submitted.
The PDP script will validated to make sure it meets the requirements we'd set out earlier so the validation
the BHP script will output error codes or a success code depending on the results of the validation.
For example if the PDP script outputs the code true so if each GMO equals true we've set an alert to
appear with the text account processed and you can see that that text will be contained within a div
the alert is displayed in a div with the I.D. add underscore error to so we haven't created that yet.
So let's go ahead and create this div which will contain all our status messages
so that's what the status message looks like.
So we need to scroll down and it's located directly underneath the registration form heading.
So I need to scroll down.
Here it is
and you're going to add the following line of code directly below this.
So that's where our error messages will be contained so scroll back up once the account is processed.
We have a redirection so the user will be redirected to the index page.
Now let's say the account was not processed successfully.
This could be due to a number of reasons.
First if the PDP script outputs the text false it means that an email address already exists in the
system.
For this reason we would output the message email address already exists.
If on the other hand the HP script outputs the text f name this will mean that the first name field
was left empty and so will output the message.
First name is required.
And it's the same for L name e short which means the email address was left empty and P short which
means the password was left empty.
E format will mean that the email address was in the wrong format.
These are user defined codes so this is what we've decided to use in the BHP script.
We could have set the error code to anything we wanted but you'll see that in the next lesson.
Now lastly we have an L statement that will display a general error message.
If the form was not processed what the reason was unknown.
So for example if none of these reasons are applicable we'll just display a general message and this
could be due to a number of factors such as connection issue and things like that the before send function
here displays the word loading while the form is being processed.
And this typically takes only a fraction of a second.
So sometimes you don't even see the loading text and that's how the javascript works in the next lesson
we're not going to create the BHP script.