How to use fetch api submit an html form

Fetch api allows asynchronous means of reading files and a more simplified way of making http requests in JavaScript.

How to submit an existing html form using fetch api;

Assuming you have html source code with a form and some input fields;

<form id="form" action="./submit" method="post"
<input name="query">

You can pass an instance of a dom form to formData constructor as the first parameter;

const handle = function(event) {
    const data = new formData(

fetch('//localhost/api/post', {
    method: 'POST',
    body: data

Fetch api returns a new pending promise to process the response you will need to await asynchronous process once ready to consume parse it as follows;

.then(response => response.json())

.then(response => console.log(response))


Popular posts from this blog

How to set content disposition header for nginx server to force content download

Animated daylight on HTML5 Canvas

How to make a static http server in nodejs using express

How to make a Snake Game using JavaScript and html5

JS13K Preparation