htmx-demo/contactsapp/templates/edit.gohtml

{{define "edit.html"}}
{% extends 'layout.html' %}

{{ block "content" . }}

    <form action="/contacts/{{ .contact.id }}/edit" method="post">
        <fieldset>
            <legend>Contact Values</legend>
            <div class="table rows">
                <p>
                    <label for="email">Email</label>
                    <input name="email" id="email" type="email"
                           hx-get="/contacts/{{ .contact.id }}/email" hx-target="next .error"
                           hx-trigger="change, keyup delay:200ms"
                           placeholder="Email" value="{{ .contact.email }}">
                    <span class="error">{{ .contact.errors.email }}</span>
                </p>
                <p>
                    <label for="first_name">First Name</label>
                    <input name="first_name" id="first_name" type="text" placeholder="First Name"
                           value="{{ .contact.first }}">
                    <span class="error">{{ .contact.errors.first }}</span>
                </p>
                <p>
                    <label for="last_name">Last Name</label>
                    <input name="last_name" id="last_name" type="text" placeholder="Last Name"
                           value="{{ .contact.last }}">
                    <span class="error">{{ .contact.errors.last }}</span>
                </p>
                <p>
                    <label for="phone">Phone</label>
                    <input name="phone" id="phone" type="text" placeholder="Phone" value="{{ .contact.phone }}">
                    <span class="error">{{ .contact.errors.phone }}</span>
                </p>
            </div>
            <button>Save</button>
        </fieldset>
    </form>

    <button id="delete-btn"
            hx-delete="/contacts/{{ .contact.id }}"
            hx-push-url="true"
            hx-confirm="Are you sure you want to delete this contact?"
            hx-target="body">
        Delete Contact
    </button>

    <p>
        <a href="/contacts">Back</a>
    </p>

{{ end }}
{{end}}