# Click to Edit Button This is a simple example of a click to edit button based on the [HTMX Example](https://htmx.org/examples/click-to-edit/).

Source Code

             from fasthtml.common import *
app, rt = fast_app()
flds = dict(firstName='First Name', lastName='Last Name', email='Email')

@dataclass
class Contact:
    firstName:str; lastName:str; email:str; edit:bool=False
    def __ft__(self):
        def item(k, v):
            val = getattr(self,v)
            return Div(Label(Strong(k), val), Hidden(val, id=v))
        return Form(
            *(item(v,k) for k,v in flds.items()),
            Button('Click To Edit', cls='btn btn-primary'),
            post='form', hx_swap='outerHTML')

contacts = [Contact('Joe', 'Blow', '[email protected]')]

@app.get('/')
def homepage(): return contacts[0]

@app.post('/form', name='form')
def form(c:Contact):
    def item(k,v): return Div(Label(k), Input(name=v, value=getattr(c,v)))
    return Form(
        *(item(v,k) for k,v in flds.items()),
        Button('Submit', cls='btn btn-primary', name='btn', value='submit'),
        Button('Cancel', cls='btn btn-secondary', name='btn', value='cancel'),
        post="contact", hx_swap='outerHTML'
    )

@app.post('/contact', name='contact')
def contact(c:Contact, btn:str):
    if btn=='submit': contacts[0] = c
    return contacts[0]
           

Live Demo