Submit an HTMLFormElement asynchronously and receive a Promise which resolves with the response data.

async-submit-form.ts

export default function asyncSubmitForm (form:HTMLFormElement): Promise<Response> {
	return window.fetch(formRequest(form))
		.then(checkStatus)
		.then(response => response.json());
}

export function formRequest(form:HTMLFormElement): Request {
	return new Request(form.action, {
		method: form.method,
		headers: {
			'X-Requested-With': 'XMLHttpRequest',
			'Accept': 'application/json'
		},
		body: new FormData(form)
	});
}

// https://github.com/github/fetch#handling-http-error-statuses
function checkStatus(response:Response): Response {
	if (response.status >= 200 && response.status < 300) {
		return response;
	} else {
		throw new Error(response.statusText);
		// append original response to error?
	}
}

example.html

<form id="demo" method="post" action="path/to/login">
    <label>
        username
        <input name="username">
    </label>
    <label>
        password
        <input name="password" type="password">
    </label>
    <input type="submit" value="Log in">
</form>

example.ts

import asyncSubmitForm from './async-submit-form';

const form = document.getElementById('demo');

form.addEventListener('submit', (event) => {
    // do something to indicate form is processing
    event.preventDefault();
    
    asyncFormSubmit(form)
        .then(data => {
          // use response data (json) to update view 
        })
        .catch(err => {
          // handle error (eg. restore form and ...)
          console.error(err);
        })
})