How to POST Data from an HTML Form to an API URL Using JavaScript

Learn how to send data from an HTML form to an API URL using JavaScript with the POST method. Includes detailed code and explanation on how to use Fetch API to handle form data and send POST requests.

Here is the JavaScript code to send data from an HTML form to an API URL using the POST method:

<form id="myForm">
    <input type="text" name="username" placeholder="Enter your username" required />
    <input type="email" name="email" placeholder="Enter your email" required />
    <button type="submit">Submit</button>
</form>

document.getElementById('myForm').addEventListener('submit', async function (event) {
    event.preventDefault();  // Prevent default form submission

    const formData = new FormData(this);  // Collect data from the form

    const data = Object.fromEntries(formData);  // Convert form data to a JSON object

    try {
        const response = await fetch('https://api.example.com/submit', {
            method: 'POST',  // Use POST method
            headers: {
                'Content-Type': 'application/json'  // Content type sent is JSON
            },
            body: JSON.stringify(data)  // Convert data to JSON and send
        });

        if (response.ok) {
            const result = await response.json();  // Process the API response
            console.log('Success:', result);  // Handle success
        } else {
            console.error('Error:', response.statusText);  // Handle errors
        }
    } catch (error) {
        console.error('Fetch error:', error);  // Handle connection errors
    }
});

Explanation of Each Line of Code:

1. HTML Form:

   • form id="myForm": Defines a form with an id of myForm.
   • <input>: Input fields where users can enter data.
   • <button>: Button to submit the form.

2. document.getElementById('myForm').addEventListener('submit', ...)

   • Listens for the form submit event.

3. event.preventDefault();

   • Prevents the default browser action of submitting the form, so we can handle it with JavaScript.

4. const formData = new FormData(this);

   • Creates a FormData object from the form, containing all input data.

5. const data = Object.fromEntries(formData);

   • Converts the form data from FormData format to a JSON object for sending to the API.

6. const response = await fetch('https://api.example.com/submit', { ... });

   • Uses fetch to make a POST request to the API URL.

7. method: 'POST'

   • Specifies that the HTTP method is POST to send data.

8. headers: { 'Content-Type': 'application/json' }

   • Sets the request header to specify that the content type being sent is JSON.

9. body: JSON.stringify(data)

   • Converts the data object into a JSON string and sends it in the request body.

10. if (response.ok)

    • Checks if the response was successful (status in the 2xx range).

11. const result = await response.json();

    • Converts the API response to JSON format.

12. console.log('Success:', result);

    • Logs the success result to the console.

13. console.error('Error:', response.statusText);

    • Logs any errors if the request was unsuccessful.

14. catch (error)

    • Handles connection errors or any exceptions that occur.

JavaScript Version:

The provided code is compatible with modern browsers that support ES8 (ECMAScript 2017) and later versions. Ensure your browser supports async/await