In many real-world applications, you'll need to send data to the server using POST requests. Here's how to send form data using the Fetch API.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POST Request with Fetch</title>
</head>
<body>
<form id="postDataForm">
<input type="text" id="title" placeholder="Enter title" required>
<input type="text" id="body" placeholder="Enter body" required>
<button type="submit">Submit</button>
</form>
<div id="postDataOutput"></div>
<script>
document.getElementById('postDataForm').addEventListener('submit', function(e) {
e.preventDefault();
const title = document.getElementById('title').value;
const body = document.getElementById('body').value;
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: title,
body: body
})
})
.then(response => response.json())
.then(data => {
document.getElementById('postDataOutput').innerHTML = `
<h3>Data Submitted:</h3>
<p>Title: ${data.title}</p>
<p>Body: ${data.body}</p>
`;
})
.catch(error => console.error('Error:', error));
});
</script>
</body>
</html>