<html>
<head>
</head>
<body>
<form id="form" method="post">
<input type="text", id="name" placeholder="Name"/></br>
<input type="text", id="body" placeholder="Body"/></br>
<input type="submit" value="Add"/>
</form>
<div>
<h3>The Following data is successfuly posted</h3>
<h4 id="title"></h4>
<h5 id="bd"></h5>
</div>
</body>
<script>
var form=document.getElementById('form')
form.addEventListener('submit', function(e){
e.preventDefault()
var name=document.getElementById('name').value
var body=document.getElementById('body').value
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title:name,
body:body,
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
}
})
.then(function(response){
return response.json()})
.then(function(data)
{console.log(data)
title=document.getElementById("title")
body=document.getElementById("bd")
title.innerHTML = data.title
body.innerHTML = data.body
}).catch(error => console.error('Error:', error));
});
</script>
</html>Output The Following data is successfuly posted
bandhu
good
