Comment Form Example - (AJAX Examples)

In this tutorial, we'll show you how to create a comment form using AJAX to submit data to the server without refreshing the page. This will allow users to leave comments on your website without interrupting their browsing experience.

Setting up the HTML

We'll begin by creating the HTML form that users will see when they want to leave a comment. Here's an example of what it might look like:

<form id="comment-form">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name"><br>

  <label for="email">Email:</label>
  <input type="email" name="email" id="email"><br>

  <label for="comment">Comment:</label>
  <textarea name="comment" id="comment"></textarea><br>

  <button type="submit" id="submit-comment">Submit Comment</button>
</form>

<div id="comment-status"></div>

In this form, we're using a form element with the ID of comment-form. We've also included three input fields for the user's name, email address, and comment, as well as a submit button with the ID of submit-comment.

Finally, we've included a div element with the ID of comment-status. This is where we'll display a message to the user when their comment has been submitted.

Submitting the form with AJAX

Now that we have the HTML form set up, we'll need to create some JavaScript code to submit the form data to the server using AJAX.

const form = document.getElementById('comment-form');
const status = document.getElementById('comment-status');

form.addEventListener('submit', function(event) {
  event.preventDefault();

  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const comment = document.getElementById('comment').value;

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/submit-comment');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function() {
    if (xhr.status === 200) {
      status.innerText = 'Comment submitted successfully!';
    } else {
      status.innerText = 'An error occurred while submitting your comment.';
    }
  };
  const data = JSON.stringify({ name, email, comment });
  xhr.send(data);
});

In this code, we've started by getting a reference to the form and the comment-status element from the HTML.

Next, we've attached an event listener to the form for the submit event. When the user submits the form, we call event.preventDefault() to prevent the default form submission from occurring, which would cause the page to reload.

Then, we get the values of the name, email, and comment fields from the form.

We create a new XMLHttpRequest object and use it to send data to the server via a POST request to the /submit-comment endpoint. We also set the Content-Type header to application/json to indicate that we're sending JSON data.

If the request is successful (we receive a 200 status code from the server), we display a success message in the comment-status element. If there's an error, we display an error message instead.

Finally, we stringify the data using JSON.stringify and send it to the server using xhr.send.

Handling the server-side submission

On the server side, you'll need to create an endpoint to handle the incoming request that we sent using AJAX.

app.post('/submit-comment', (req, res) => {
  const name = req.body.name;
  const email = req.body.email;
  const comment = req.body.comment;

  // Save the comment to the database

  res.sendStatus(200);
});

In this code, we're using Express.js to create a new POST endpoint at /submit-comment.

When the server receives a POST request to this endpoint, it extracts the name, email, and comment fields from the request body. We then save the comment to the database (you'll need to fill in this code with your own database logic).

Finally, we send a status code of 200 to indicate that the request was successful.

Summary

In this tutorial, we showed you how to create a comment form using AJAX to submit data to the server without refreshing the page. By using AJAX, we were able to improve the user experience and make it more seamless for users to leave comments on our website.