Click To Edit

The click to edit pattern provides a way to offer inline editing of all or part of a record without a page refresh.

• This pattern starts with a UI that shows the details of a contact. The div has a button that will get the editing UI for the contact from /contact/1/edit

return Div(
	hx.Target(htmx.TargetThis),
	hx.Swap(swap.OuterHTML),
	Dl(
		Dt(g.Text("First Name")),
		Dd(g.Text(form.FirstName)),
		Dt(g.Text("Last Name")),
		Dd(g.Text(form.LastName)),
		Dt(g.Text("Email")),
		Dd(g.Text(form.Email)),
		Div(Role("group"),
			Button(
				hx.Get("/examples/gomponents/click-to-edit/edit/"),
				g.Text("Click to edit"),
			),
		),
	),
)

• This returns a form that can be used to edit the contact

return FormEl(
	Method("POST"),
	Action("/examples/gomponents/click-to-edit/edit/"),
	hx.Post("/examples/gomponents/click-to-edit/edit/"),
	hx.Target(htmx.TargetThis),
	hx.Swap(swap.OuterHTML),
	Label(
		g.Text("First Name"),
		Input(
			Type("text"),
			Name("firstName"),
			Value(form.FirstName),
			g.If(
				form.HasError("FirstName"),
				g.Attr("aria-invalid", "true"),
			),
		),
		g.If(
			form.HasError("FirstName"),
			Small(g.Text(form.GetError("FirstName"))),
		),
	),
	Label(
		g.Text("Last Name"),
		Input(
			Type("text"),
			Name("lastName"),
			Value(form.LastName),
			g.If(
				form.HasError("LastName"),
				g.Attr("aria-invalid", "true"),
			),
		),
		g.If(
			form.HasError("LastName"),
			Small(g.Text(form.GetError("LastName"))),
		),
	),
	Label(
		g.Text("Email"),
		Input(
			Type("text"),
			Name("email"),
			Value(form.Email),
			g.If(
				form.HasError("Email"),
				g.Attr("aria-invalid", "true"),
			),
		),
		g.If(
			form.HasError("Email"),
			Small(g.Text(form.GetError("Email"))),
		),
	),
	Div(
		Role("group"),
		Button(
			Type("submit"),
			g.Text("Submit"),
		),
		A(
			Href("/examples/gomponents/click-to-edit/"),
			Role("button"),
			hx.Get("/examples/gomponents/click-to-edit/view/"),
			g.Text("Cancel"),
		),
	),
)

• The form issues a POST back to /edit, following the usual REST-ful pattern.
• If there is an error, the form swaps the form with error messages in place of the edit form.

Source

Demo