So now we implemented this fetch
comments functionality.
Let's now see how we can continue with sending comments.
By the way,
I will later come back to fetching comments
and also handle the case that we might not have any comments
or that something went wrong on the server.
But for the moment,
let's move on to sending a comment first,
because we can also do this with Ajax.
Of course,
it also works as it currently does with the traditional
approach.
But then whenever we add a new comment like this,
we reload the entire page.
All the loaded comments are gone and this is not really
the way I want this to behave.
So therefore we can also use Ajax for this.
Now for that,
let's go back to the post detail EJS file
and have a look at what we got there.
Here, we got a form with the inputs and then a button
that submits the form,
and then it's just form action and the method
that does its job.
Now here, we can also, again,
add our own event listener and we could, again,
of course also add a click listener to this button,
give it an ID,
and then get access to the text area and the input,
maybe also through their IDs,
and then work with that.
That would work.
But from a semantic perspective, you remember semantics,
HTML, that's all important.
It is actually considered a good practice
to wrap form elements, like the input and the text area,
into a form element.
So I don't really want to get rid of that form here.
Still, I don't want the browser to submit the form.
I would rather handle it with JavaScript myself
so that I can send such a behind the scenes request.
Thankfully, that is also something we can do.
We can remove the action and method here
because that only matters to the browser,
if the browser does submit that form.
And instead we can now handle the form submission ourselves.
For this, we just need to get access to it.
And we could give this form an ID to do that.
Or we use the ID on this section and then select the form
inside of this section.
And I'll do the latter also to practice this form,
or this way of selecting HTML elements again.
So in comments JS,
I will now get access to my comments form element
by using document query selector now.
Not get element by ID and I select the comments form
element here, and then in there, the form element.
Remember for a query selector,
you passed in a CSS selector and that will then
give you access to an HTML element that matches
this selector to the first element that matches
this selector to be precise.
So with that,
we should get access to this form element here,
and then we can add a listener to it.
And that's important.
We will now add a listener to this form element,
to this form element itself,
not to the button in there.
Instead here at the bottom next to the other listener.
to keep our overall code organized.
I'll use this comments form element we just added
and add an event listener.
And now it's not a click listener,
but instead the submit listener, because form elements,
if you have hold of those elements in your JavaScript code,
do also emit a submit event when they are submitted.
So once a button in them is clicked.
So the submit event will fire
whenever this form is submitted,
before the browser tries to handle the submission
on its own.
Then we still need to point at a function here
and I'll add a new function for this,
the save comment function maybe.
And here I will therefore point at save comment.
Now there's one important thing we have to do
in this function before we actually send our HTTP request.
And that is the suppression of the default browser behavior.
The default browser behavior would be to send the request
on its own.
So the browser would automatically send a request.
That's how the browser works.
Here, we don't want that.
We want to prevent that browser default
and instead write our own code for sending our own request.
And we can do this with help of this event object,
which we get automatically.
This event object has a prevent default method
automatically.
It's built into the browser,
which does just what the name implies.
It prevents the browser default,
so it will prevent the browser from sending a request
to some server automatically.
So that's the first thing we have to do.
And then as a next step,
we can actually gather all the value we want to send
to the server and then send our own request.
Now, the data I do want to send is this input value
and this text area value,
and there are different ways of gathering that data.
For example,
we could create a form data object
as we also did it earlier in the course
in the tic tac toe game,
or we get access to these elements with their IDs
and then read the currently entered values.
And I'll do the latter here,
but both approaches would be fine.
So here are all quickly get access to my comment title
element by using document get element by ID title.
Since that input element has this ID title.
And then here I have to comment text element,
and here we get access with get element by ID text,
because text is the ID assigned to this text area here.
So now we've got these two constants that give us access
to these HTML elements.
And then for down there,
we now got the entered title,
or however you want to name it,
which we get by using the comment title element
and accessing the value property, which gives us the value
the user entered.
This exists on all input and text area
and select elements and so on.
And we got the entered text,
which we get by using the comment text element
and there accessing the value.
So now with that, we can, first of all,
console log this to confirm that this data fetching works,
that we get access to the entered data
before we then send it as a request.
So if you save this now and I do reload,
if we open developer tools and the console there,
if I enter test text and test here and I click save comment,
the page does not reload.
So the browser default is prevented. No request was sent.
Otherwise we would have reached a new page
and we see the output here.
So preventing the default works
and fetching the user input works.
And with that, we can now again,
send our HTTP request through JavaScript.