In this lesson, we are going to be setting up basic contact form, so sending input fields and we're
going to be submitting it to an end point and that's what we're going to be setting up in the next lesson.
So this lesson we're constructing, the JSON object that we're going to be sending over.
And right now it's just sending to the regular page as the end point as we're going to be constructing
the endpoint afterwards.
So this form also does have some validations.
So we're checking to see if they're valid emails and as well as if we've got a length of more than five
characters within the name field.
So once those do get adjusted, it always does the check before it actually sends the email.
So it's not sending the email until it sees at least five characters in the name field username field
and at least a valid email within the email field.
So let's go ahead and open up the editor to create the contact form to send the AJAX request to the
server.
So I've got the standard HTML file indexed HTML.
Nothing for styling yet and we've got a main div container with a class of container form with an ID
of sign up and then several inputs here for the name and also for the email address.
There's a text area to pick up the information contained for our message area.
And then also lastly, there's an input and this is a submit button.
So submitting this form will, what we want to do is send the AJAX requests, so picking it up with
the FETCH request and then processing the data, getting the data from the form and then sending it
over to the server within a JSON format.
So going into the code, first of all, let's go ahead and will select our form.
So just give it a name of my form.
And then using the document object and query selector, we're going to select the elements with ID of
sign up.
So it's our main sign up form that we're going to be selecting.
I'm also going to update The View to toggle the Wardrop so that we can see the full content of the text
that we're writing.
Next up, that's add the event listener on that form object.
So my form object and because this is a submit button, we can add an event listener and listen for
the submit action on the form itself.
And we're passing over the event object because what we want to do, because this is going to be an
AJAX request, we're going to be using the prevent default.
So that's e prevent default.
And what that does is that's going to prevent the default action of the form submission.
So as before, we saw when we clicked the send message that was actually passing in all of those parameters
there.
So if we commented out and if we hit send, we get the whole parameters there within the euro.
So we don't actually want it to refresh the page or send any information as it's going to be taken care
of with our AJAX request.
So that's why we're including the prevent default so the default action doesn't happen and within the
console.
And we'll just sending data, so that's what we want to do whenever the form is hit submitted that we
want to send the data.
So we want to get all of the form contents so all of the elements from the form itself.
And there's a few ways to do that.
We've seen some of the ways that we can create and get form data.
So you don't necessarily need to do that if you want to go through each one of them and pick up and
do some vetting of the content.
So make sure that the email is an actual valid email and we are using HTML five, so it will flag that
this is an email type.
So it should be formatted as an email.
So that will be flagged by the browser.
But there's also just if you want to check, to see the length of the content and so on, you can do
that before you actually submit it to the server.
So let's loop through all of the elements, all of the elements, all of the form inputs, and we can
do that with my form.
Object and listing out all of the elements.
So if we can't so log out and that actually should just be elements.
The editor sometimes adds an extra method's, so we just want to get all of the elements.
So let's set all of the elements so we've got the two inputs, text area, and then this last one as
well is there.
So let's out the four different elements on the page.
So we want to loop through all of the elements.
So we have the form elements, but we're not able to actually iterate through them.
So we need to select it.
And this is because this is in a similar form controls collection.
So this is different and you can't use the iteration for the for each, but we can use the for loop
in order to pick up the information that's contained within each element.
So as we iterate through the elements, we can check the content that's contained within the elements.
So just select the URL and we do have a length value.
So that's where we can use the for loop increment I plus one and within the console, let's output each
individual element using the index value as we're looping through it.
So hit the send and that gives us each one of those elements.
I don't want to pick up the information that's contained within the submit button, so let's break that
apart and only add and we're going to create an object.
So just create a temporary holder object.
And then within this object we're going to add to the holder, depending on what the name of the element
is, and also then associating the value.
So for each one that we loop through.
Let's select each element and I'll give it a name, El, and this is going to be we're referring to
that particular element object as we're iterating through and then Forell itself.
Using the console log.
You can get.
And get the attribute type for want, and the reason I'm listening that is that so that we can select
and we can check to see if the type is going to be a submit type.
And if it is, then we know we can skip it.
So text, email and all are OK, but we need to track and not actually track the data that's within
the segment.
So if that L type is not equal to submit, then we want to add it to our object.
So let's now output into the console, log the elements and we'll just get the name of the element.
And we can also use the get attribute, get name.
So name is name here, name is email, name message.
So just double check and make sure that you're able to pull the information out.
And as well, you could also just use the get attribute type as well.
So those are both values within the object.
And also, let's get the value that's contained within it.
So as we loop through and there we've got the values that are contained within it and with each HTML,
you can add the required field.
So for this case, we do want to make sure that the email does have a required field for the email so
you can add in within the HTML just required and also if you want to set the name to required.
And what this will do is this is just a function of HTML.
So now if we try to submit, we get please fill out form.
And this is going to be the same flagging that since this is an email type input, the browser itself
is going to be flagging those input values.
So it's going to flag it that this isn't a proper email, that these two fields are required.
So we're not actually able to do any of the submitting.
So it's not getting even to the JavaScript as it's caught within the browser of the HTML when we're
trying to submit it.
So that's just setting it as required.
I'm going to just set a default value of it.
And that's just one of my email addresses that I'm going to be using, so I'd send the email address.
So now when we submit we're still submitting, everything is still back.
As expected, we're able to submit a comment to some of these cons. messages.
So right now, we're just getting the property name that we want to use and the value property value
of property and value.
So let's add that into our holder object.
So for within the holder using the bracket notation, we're going to set the property name and then
here we can assign the value to that property and I'll just cancel these because we don't need them
anymore.
And once we finish looping through within the console, we'll output the value of Holder.
So that constructs JSON object that we can send over to the server and in order to do the submission
of the content.
So also, while we're looping through here, we can check to check the different conditions as well
so we can check to see if the name is equal to the name, which is the user name.
And I'm just going to actually update this instead of name.
Let's put a user to avoid any of the confusion.
So now we've got the user.
And actually not putting the value, so I need to update that to make sure that I'm actually setting
the value instead of the property name.
So there's all of that JSON constructed.
So let's do a check to see if and we're going to check to see if aliments.
Name is equal to the user, and if it is, then we want to check in, get the flag to see if it's one
that we want to add.
So let's construct an array and then this can serve as our error array.
And if at the end, if the error length is equal to zero, then we can actually submit the form content.
So we're going to be updating it, adding to the error.
So just before we finalize and submit it, we're going to be adding and checking to see if the error
length is OK.
So as we loop through each one of the elements, we're checking to see if the attribute type is submit.
So we'll create another variable and we'll just call it Val.
And so this is going to be whether it's valid or not.
So we can use this as a control variable to check to see if we're actually adding it into the holder
array.
And then if we are throwing any errors, then we're going to add and append to the error array.
So let's set the valid to true and just before we add it, and this will just clean up the code a little
bit, you can also test them with him.
So it's checking to see if it's not submit.
So you could have these with in here or you could separate them out and check to see if it is submit
and then we would set the valid to false.
So now we checked to see valid.
And if it is valid, if it's still valid, then we added into the holder.
And if it's is equal to submit, then Val is going to be false.
So that is false and this way we could have some conditions, so for the user, let's say we want to
have a minimum length for the user, a value of five characters, and then you can set different parameters
as well.
And you can also do a regular expression to check, to see if it's a valid email and so on.
So let's select the user and check to see if the URL so we'll have another condition.
So if Al.
Value and or checking to see if the length of the value and using the string methods in JavaScript,
so every string is going to have a length, just as we saw with the race.
So if we make sure that it's larger than four.
So five would be OK.
Or you could do a large greater than or equal to.
So as long as it's larger than four, then it's OK.
And if it's actually going to be less than five, then we're going to flag it and update Val, set that
to false and then also take the error and push to the error.
And it's going to give us some error messages and error message name it needs to be.
Five plus.
Or more so that will just push the air and then we can also check for email addresses and so on, so
if we do get errors.
Then we can take the error and for each error.
We can output the air contents to the console and eventually we're going to provide those air details
to the user.
Let's make it shorter, so make it four characters.
And I'm going to just update this to be a fair length is greater than zero, so needs to be five or
more, so it's still building the Holder object.
But in this case, if there are any if the air length is greater than zero, then we're not going to
be doing the submission.
And if it's not, then we can do the form submission.
So that's if we haven't caught any of the errors or if there haven't been any errors thrown.
So another one that you could do is to check, to see if it's a valid email so you can use a regular
expression for that.
So let's create a function.
And there's a number of functions online that you could search out and valid validate email.
So past the email object and then we'll do a regular expression to check to see if it's valid.
So this is the one that I typically will use and we'll just use the JavaScript test.
So the regular expression is going to check to see if there's an end sign content, a dot and more content.
So it's going to just do a quick check and then do a return of the tested value.
So this is going to return back a boolean value of testing the email within this regular expression.
So be either true or false for the valid email.
So let's also have that condition where if and this is going to be it only if it's an email address.
So if my name is email, then we'll do the condition, whether it's a valid email and we can also set
this to false.
So if we validate email and I'll create a variable for that so that we can log that into the console,
so we'll see what gets returned back from the function.
Now, you don't have to do this.
You could just do this within the one statement.
So we're checking to see if this is going to be true or false.
And depending on what the response here is, whether it is true or false, whether the check comes back
true or false, then we can add to the false.
So if Chuck comes back and it's false, this is just going to check to see if it's a valid email.
Not a valid email, and I'm actually going to remove out the tape and update this to text, so that
way the HTML5 isn't going to be checking for email.
But if you are going live with it, I just keep your type and keep that as email so that you have the
double check for the valid email address.
So let's try this one.
And email is not defined, and that's because we're passing in the email value, but we're not getting
the full value from the input, so that should be our value and try that one more time.
So not valid email.
That's what we get return back.
So false and we're pushing the errors.
And so it also allows us to track multiple errors.
So it needs to be five or more not valid email so we can output all of this message content to the user.
So and we can add that into the output area.
So let's select that output area using the documents and query selector, select the element with a
class of output, and then within that output, let's update the contents of output.
So take output in our HTML and we'll just set that to blank.
And then as we loop through, take output and we'll just add to it.
So add to the inner HTML of output the error value.
So now if we're throwing any errors and let me just double check and we don't actually have an output
content area, so let's update that div.
Class of output, and that's where we can have the response message to the user, let's double check,
see that it's working.
So not valid email.
And if we get both of them, so it outputs both of them to the page.
And just add to it a line break.
And double check, just make sure we get both of those name needs to be five or more characters, not
valid email, and if we do get more characters, we only get the one error message.
And if we don't have any errors, if it is a valid email, so if it does come with a valid email structure,
then we are actually submitting the content and and this was where we can make the fetch request.
So let's set up the Thach request to the server and pass the user email and message to the server.
So this is where everything is valid.
We've already got the data within the holder object.
So from there we can take and we can do the Fach request.
So let's set up just your URL and this is going to be wherever we're sending the email to.
So right now we'll just send it to the same index page and then we're going to create the endpoints
in the upcoming lessons.
So we're submitting the data to the server and this is where we can have our Futch request to the euro.
And then passing in the options object and then within the then.
We'll get our response back and we're going to set up the server to send a Jason response back.
And then lastly, we'll get the data and put that into the console.
So whatever we get back from the server, so right now we're not going to actually get anything back,
but we're just setting up that we can make the request so set up within the parameters method and the
method that we're going to be using is going to be post.
And the body of the submission and we're not going to require any headers for this, so we can just
string ify the contents of Holder.
And that way we're setting our message, and right now we just get a four or five back because we're
sending it over to our page so we're not actually able to do a post to this page.
So coming up next, we'll set up doing and creating the post for the contact form.
And The Post is going to be done with Google script.
We're going to create an end point using Google Scripts Web app, and that will generate an endpoint
that we can submit our form contents to and then eventually send an email.
And that's going to be done with the backend code in Google Apps script and Google Apps script if you're
not familiar with it.
This is just like JavaScript in the cloud, just modern JavaScript and allows you to connect the Google
services together with script.
And it can function as a backend code if you don't have a backend server, if you don't have backend
code to receive the email message.
And as well, you can also, if you do have it set up, if you do do any other type of backend coding,
you're sending over the JSON object.
As long as you're receiving that data, then you can write the server code in order to send the email
messages and or store the messages.
So at that point, you can do what you need to do with the content and it's just being submitted.
Thanks for this lesson or to create with HTML or with JavaScript, your contact form, so all the fields
that you want to use, select the form data and add an event.
LYSTER So when the form is submitted, add the event.
Listener Don't forget to prevent the default action.
So the event default action get form fields, names and values for each one of the fields, apply the
conditions for the data, for the form to do a condition check, applying whatever conditions that are
necessary for your input fields to make sure that the data that you're sending over is valid.
Check and valid submission data create the JSON object from the input field data in order to send it
using post method to an endpoint.
Prepare the Thach request to the endpoint and you can be ready to move on to the next lesson.
We're going to constructing the endpoint using Google subscript.