<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bweep bwoop</title>
</head>
<body>
<!-- this will work fine with noscript -->
<form action="http://localhost:4567/send" method="post">
<p><input type="text" name="title" /></p>
<p><textarea name="content"></textarea></p>
<p><input type="color" name="color" /></p>
<p><button type="submit">Send</button></p>
</form>
<!-- look at that progressive enhancement -->
<script>
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
fetch(`http://localhost:4567/send`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify(Object.fromEntries(new FormData(e.target).entries())),
}).then(response => {
if (!response.ok) {
alert(`failed to send: ${error}`);
}
alert('sent!');
e.target.reset();
}).catch(error => {
alert('either your network died or you have a CORS issue, check the network log');
});
});
</script>
</body>
</html>