How to Create a New Post Using JavaScript and the Fetch API
JavaScript Developer WorldWide
Join the JavaScript Developers worldwide JavaScript Developers JavaScript Coders JavaScript Freelancers
How to Create a New Post Using JavaScript and the Fetch API
Sending data to a server is a crucial aspect of modern web applications. Whether you're submitting a form, saving user preferences, or creating a new resource, the fetch API provides a straightforward way to send data via a POST request.
In this blog post, we’ll build a webpage where users can create a new post by entering details in a form. The data is sent to a server using the fetch API, and the server's response is displayed dynamically.
The Complete Code Example
Below is the full HTML code for creating a new post:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create Post Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#result {
margin-top: 20px;
white-space: pre-wrap;
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
#error {
margin-top: 20px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Create a New Post</h1>
<form id="postForm">
<label for="title">Title:</label>
<input type="text" id="title" name="title" required /><br /><br />
<label for="body">Body:</label><br />
<textarea id="body" name="body" rows="4" required></textarea><br /><br />
<label for="userId">User ID:</label>
<input type="number" id="userId" name="userId" required /><br /><br />
<button type="submit">Create Post</button>
</form>
<div id="result"></div>
<div id="error"></div>
<script>
document.getElementById('postForm').addEventListener('submit', event => {
event.preventDefault();
const title = document.getElementById('title').value;
const body = document.getElementById('body').value;
const userId = document.getElementById('userId').value;
const resultDiv = document.getElementById('result');
const errorDiv = document.getElementById('error');
// Clear previous results and errors
resultDiv.textContent = '';
errorDiv.textContent = '';
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title: title,
body: body,
userId: parseInt(userId, 10),
}),
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(createdPost => {
resultDiv.textContent = `Post created successfully:\\n${JSON.stringify(createdPost, null, 2)}`;
})
.catch(error => {
errorDiv.textContent = `Error creating post: ${error.message}`;
});
});
</script>
</body>
</html>
Code Breakdown
1. HTML Form
The form includes fields for the post title, body, and user ID. A submit button triggers the JavaScript function to send the data.
<form id="postForm">
<label for="title">Title:</label>
<input type="text" id="title" required /><br /><br />
<label for="body">Body:</label><br />
<textarea id="body" rows="4" required></textarea><br /><br />
<label for="userId">User ID:</label>
<input type="number" id="userId" required /><br /><br />
<button type="submit">Create Post</button>
</form>
2. JavaScript Logic
The fetch API sends a POST request with the data entered in the form:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title: title,
body: body,
userId: parseInt(userId, 10),
}),
})
If the request is successful, the server's response is displayed in the #result container. Errors are caught and displayed in the #error container.
Recommended by LinkedIn
3. Styling
Minimal CSS is used to style the results and error messages:
#result {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
#error {
color: red;
font-weight: bold;
}
How It Works
- Form Submission: The form captures user input for the post title, body, and user ID.
- Send Data to Server: When the form is submitted, the fetch API sends a POST request to https://jsonplaceholder.typicode.com/posts, simulating the creation of a new post.
- Display Response: The server responds with a JSON object, which includes the newly created post's details. This response is displayed in a formatted JSON structure on the webpage.
- Error Handling: If the server returns an error or the fetch operation fails, an error message is displayed.
Running the Code
- Save the file as index.html and open it in a browser.
- Fill in the form fields and click "Create Post."
- Observe the server's response displayed on the page.
Why This Example is Useful
- Hands-On API Interaction: Learn how to send data to a server using the fetch API.
- Practical Form Handling: See how to capture and validate user input in a real-world scenario.
- Error Handling: Understand how to handle errors gracefully and improve the user experience.
Next Steps
To expand on this example:
- Add form validation to check for empty fields before sending the request.
- Include a loading spinner to indicate that the request is in progress.
- Connect to a real API to handle actual data instead of using a placeholder API.
By following this tutorial, you’ve gained the knowledge to send data to a server using JavaScript and dynamically display the results on your webpage. This skill is fundamental for building interactive web applications.
Useful tips