add submit form on enter

framework/h/lifecycle.go

@@ -241,6 +241,15 @@ func EvalJs(js string) ComplexJsCommand {
 	return NewComplexJsCommand(js)
 }
 
+func SubmitFormOnEnter() ComplexJsCommand {
+	// language=JavaScript
+	return EvalJs(`
+		if (event.code === 'Enter') { 
+			self.form.dispatchEvent(new Event('submit', { cancelable: true })); 
+		}
+	`)
+}
+
 func InjectScript(src string) ComplexJsCommand {
 	// language=JavaScript
 	return NewComplexJsCommand(fmt.Sprintf(`

framework/js/commands.go

@@ -19,6 +19,7 @@ var SetClassOnSibling = h.SetClassOnSibling
 var RemoveClassOnSibling = h.RemoveClassOnSibling
 var Remove = h.Remove
 var EvalJs = h.EvalJs
+var SubmitFormOnEnter = h.SubmitFormOnEnter
 var InjectScript = h.InjectScript
 var InjectScriptIfNotExist = h.InjectScriptIfNotExist
 var GetPartial = h.GetPartial

htmgo-site/pages/form.go

@@ -2,6 +2,7 @@ package pages
 
 import (
 	"github.com/maddalax/htmgo/framework/h"
+	"github.com/maddalax/htmgo/framework/hx"
 	"github.com/maddalax/htmgo/framework/js"
 	"htmgo-site/pages/base"
 	"htmgo-site/partials"
@@ -18,9 +19,12 @@ func Form(ctx *h.RequestContext) *h.Page {
 				h.Class("flex flex-col gap-2"),
 				h.LabelFor("name", "Your Name"),
 				h.Input("text",
+					h.Required(),
 					h.Class("p-4 rounded-md border border-slate-200"),
 					h.Name("name"),
-					h.Placeholder("Name")),
+					h.Placeholder("Name"),
+					h.OnEvent(hx.KeyDownEvent, js.SubmitFormOnEnter()),
+				),
 				SubmitButton(),
 			),
 		),
@@ -46,6 +50,7 @@ func SubmitButton() *h.Element {
 			h.Text("Submitting..."),
 		),
 		h.Button(
+			h.Type("submit"),
 			h.Class("submit", buttonClasses),
 			h.Text("Submit"),
 		),