Posting Form Data as JSON Using the Fetch API: A Comprehensive Guide

Posting Form Data as JSON Using the Fetch API: A Comprehensive Guide

Emmanuel Otieno's photo
Emmanuel Otieno
·

2 min read

In the modern web development landscape, the Fetch API has become a go-to tool for making HTTP requests from the browser to the server. One common use case involves submitting form data to a server, where the data is processed and stored. However, when dealing with APIs that expect data in JSON format, the process requires a bit more work. This article will guide you through the steps to post form data as JSON using the Fetch API, ensuring a smooth and efficient data transmission.

Understanding the Basics

Before diving into the specifics, it's crucial to understand the basics of the Fetch API and how it interacts with form data. The Fetch API provides a powerful and flexible way to fetch resources from the server, including sending data to the server. When dealing with form data, the Fetch API allows you to send this data as JSON, which is a common requirement for many APIs.

Setting Up Your HTML Form

To illustrate the process, let's start with a simple HTML form. This form will capture user input, which we will then send to a server as JSON.

<form class="form" id="form">
        <label for="username">Username</label>
        <input name="username" id="username" type="text" placeholder="username">
        <label for="password">Password</label>
        <input name="password" id="password" type="password" placeholder="password">
        <label for="checkbox">Terms and conditions</label>
        <input type="checkbox" id="checkbox" name="termconditions">
        <input type="submit"></input>
    </form>

Capturing Form Data and Preventing Default Submission

To capture the form data and prevent the default form submission, which would cause the page to reload, we add an event listener to the form's submit event. We use event.preventDefault() to stop the form from submitting in the traditional way.

document.getElementById('form').addEventListener('submit', async event => {
    event.preventDefault();
});

Sending Data Using Fetch API

With the form data captured, we can now use the Fetch API to send the data to the server. We specify the URL of the server endpoint, set the method to 'POST', and include the JSON data in the body of the request. JSON.stringify() is used to convert the data to JSON format. This would look something like this.

//grabbing the form element
const formEl = document.querySelector('.form')
//grabbing the form data 
const formData = new FormData(formEl)
const data = Object.fromEntries(formData)
//posting the form data to the server using fetch api
fetch("URL", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    }).then(res=>res.json())

Conclusion

Following these steps is an effective method of handling form data and posting it to the server using fetch API. As you continue to explore the Fetch API and its capabilities, remember to experiment with different APIs and web development projects to further enhance your skills.

fetch API