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

<div
	{ hx.Target(htmx.TargetThis)... }
	{ hx.Swap(swap.OuterHTML)... }
>
	<dl>
		<dt>First Name</dt>
		<dd>{ form.FirstName }</dd>
		<dt>Last Name</dt>
		<dd>{ form.LastName }</dd>
		<dt>Email</dt>
		<dd>{ form.Email }</dd>
		<div role="group">
			<button { hx.Get("/examples/templ/click-to-edit/edit/")... }>
				Click To Edit
			</button>
		</div>
	</dl>
</div>

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

<form
	method="POST"
	action="/examples/templ/click-to-edit/edit/"
	{ hx.Post("/examples/templ/click-to-edit/edit/")... }
	{ hx.Target(htmx.TargetThis)... }
	{ hx.Swap(swap.OuterHTML)... }
>
	<label>
		First Name
		<input
			type="text"
			name="firstName"
			value={ form.FirstName }
			if form.HasError("FirstName") {
				aria-invalid="true"
			}
		/>
		if form.HasError("FirstName") {
			<small>
				{ form.GetError("FirstName") }
			</small>
		}
	</label>
	<label>
		Last Name
		<input
			type="text"
			name="lastName"
			value={ form.LastName }
			if form.HasError("LastName") {
				aria-invalid="true"
			}
		/>
		if form.HasError("LastName") {
			<small>
				{ form.GetError("LastName") }
			</small>
		}
	</label>
	<label>
		Email Address
		<input
			type="text"
			name="email"
			value={ form.Email }
			if form.HasError("Email") {
				aria-invalid="true"
			}
		/>
		if form.HasError("Email") {
			<small>
				{ form.GetError("Email") }
			</small>
		}
	</label>
	<div role="group">
		<button type="submit">Submit</button>
		<a
			href="/examples/templ/click-to-edit/"
			role="button"
			{ hx.Get("/examples/templ/click-to-edit/view/")... }
		>
			Cancel
		</a>
	</div>
</form>

• 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