zs-starter-template/TestCGI.html
2024-03-03 05:40:13 +00:00

90 lines
3.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/assets/css/bahunya.css">
<link rel="stylesheet" href="/assets/css/board.css">
<link rel="stylesheet" href="/assets/css/highlight.css">
<link rel="stylesheet" href="/assets/css/site.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<title>Test CGI</title>
<meta name="title" content="Test CGI" />
<meta name="description" content="A starter template for the Zen Static (zs) site generator" />
<meta name="keywords" content="zen, static, zs, starter, template, site, website, template, generator, ssg" />
</head>
<body>
<nav>
<a id="brand" href="/">Home 🏠</a>
<a href="/TestPage.html">Test Page 🧪</a>
<a href="https://zs.mills.io/">Demo 🥳</a>
<a href="https://git.mills.io/prologic/zs">Source 💾</a>
</nav>
<header>
<h1>Test CGI</h1>
</header>
<aside><p><strong>On this page</strong></p>
</aside>
<article><h1 id="test-cgi">Test CGI <a class="anchor" href="#test-cgi"> </a></h1>
<h2 id="form">Form <a class="anchor" href="#form"> </a></h2>
<form id="hello" action="/cgi-bin/hello" method="POST">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<h2 id="results">Results <a class="anchor" href="#results"> </a></h2>
<div id="result"></div>
<hr />
<script>
document.addEventListener('DOMContentLoaded', function(event) {
u("#hello").on("submit", function (e) {
e.preventDefault();
const data = new FormData(u("#hello").first());
var object = {};
data.forEach(function(value, key){
object[key] = value;
});
var json = JSON.stringify(object);
fetch("/cgi-bin/hello", {
method: "POST",
body: json,
}).then(function (res) {
if (res.ok) {
res.text().then(function (text) {
u("#result").text(text);
})
} else {
u("#result").text(res.statusText)
}
});
});
});
</script></article>
<a href="TestCGI.md?edit" rel="nofollow" target="_self">✍️ Edit this page</a>
<footer>
Copyright &copy; James Mills ·
Last modified <time datetime="2024-03-03T05:40:12Z+00:00
">Sun Mar 3 05:40:12 UTC 2024
</time> ·
Built with <a href="https://git.mills.io/prologic/zs">zs</a>
</footer>
<script type="application/javascript" src="/assets/js/highlight.js"></script>
<script type="application/javascript" src="/assets/js/umbrella.js"></script>
<script type="application/javascript" src="/assets/js/live.js"></script>
<script>
hljs.highlightAll();
</script>
</body>
</html>