How to make Axios POST requests in JavaScript

In this article, we will see how to build a login form in HTML and post the form data to an API endpoint using axios.

Building a login form

Create a file called index.html with the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        justify-content: center;
      }
      .item {
        display: flex;
        justify-content: space-between;
        gap: 20px;
      }
    </style>
  </head>
  <body>
    <form action="" id="login" method="post">
      <h1>Login</h1>
      <p class="item">
        <label for="email"> Email </label>
        <input type="email" name="email" id="email" />
      </p>
      <p class="item">
        <label for="password"> Password </label>
        <input type="password" name="password" id="password" />
      </p>
      <p class="item">
        <input type="submit" value="Login" />
      </p>
    </form>
  </body>
  <script type="text/javascript" src="./index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</html>

Here we have created a form with 2 fields: email and password. We also have a submit button.
In the end, we have included 2 scripts, the first is index.js,
where we will write our JavaScript logic and the second is axios from the CDN.

Making the POST call using Axios

Create a file called index.js with the following code:

const loginForm = document.querySelector("#login")

loginForm.addEventListener("submit", function (event) {
  // Stop the default submit and page load
  event.preventDefault()

  const email = document.querySelector("#email").value
  const password = document.querySelector("#password").value

  // Handle validations
  axios
    .post("https://example.con/login", { email, password })
    .then(response => {
      console.log(response)
      // Handle response
    })
})

In the adove code:

We are getting a reference to the form, and adding a submit handler function to it.
We are accessing the email and password entered by the user.
We are making axios POST call with the email and password in the request body to the endpoint https://example.con/login.