Back

Version 43

6/13/2024
import { Hono } from "npm:hono";

const app = new Hono();

// Endpoint to catch and log the submitted name
app.post("/submit-name", async (c) => {
const data = await c.req.parseBody();
console.log('data:', Object.keys(data))
console.log("Received name:", data.name);
return c.json({ message: `Received name: ${data.name}` });
});

// Serve the HTML page with Alpine.js
app.get("/", (c) => {
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reactive Form with Alpine.js</title>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/htmx.org" defer></script>
</head>
<body>
<div x-data="{
name: '',
output: null,
updateOutput(event) {
this.output = event.detail.xhr.responseText;
}
}">
<form id="myForm" @submit.prevent hx-post="/submit-name" hx-target="#output" hx-on:htmx:afterSwap="updateOutput">
<label for="name">Name:</label>
<input type="text" id="name" x-model="name" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
yawnxyz-honoalpineexample.web.val.run
Updated: June 13, 2024