mre_fasthtml_radio_fill_form.py

from fasthtml.common import *
import json
app, rt = fast_app(hdrs=(picolink))

main_element_style = "padding-left: 25px;"

control_container_style = "display: flex; flex-direction: column; align-items: flex-start;"

text_input_style = "width: 400px; text-align: center;"

select_input_style = "width: 400px;"
@app.get('/')
def homepage(session):

    return Body(
        Main(
            Header(
                H1("Radio Test Form with Session and Fill Form"),
            ),
            Section(
                Button("Clear Form State", hx_post='/clear_form',
                       style="margin-top: 20px;", hx_target="#result", hx_swap="innerHTML")
            ),
            Grid(
                session_form(session, submitOnLoad=True),
                outputTemplate()
            ),
            style=main_element_style
        )
    )

@app.post('/clear_form')
def clear_form(session):
    session.clear()
    return session_form(session)

def prettyJsonTemplate(obj):
    return Pre(json.dumps(obj, indent = 4), style="margin-top: 25px; width: 100%;")

def outputTemplate():
    return Div(
        Div(id="result", style="position: fixed; right: 50px; width: 500px; height: calc(100vh - 250px); overflow: auto;"),
        style="position: relative;"
    )

def trueFalseRadioTemplate(label, name, error_msg=None):
    return Div(
        Label(label),
        Div(
            Input(type="radio", id = "choice 1", name=f"{name}", value="true"),
            Label("True", for_=name),
            Input(type="radio", id= "choice 2",  name=f"{name}", value="false"),
            Label("False", for_=name),
            style="display: flex; flex-direction: row; align-items: center;"
        ),
        Div(f'{error_msg}', style='color: red;') if error_msg else None,
        style=f'{control_container_style} margin-bottom: 15px;'
    )

@app.post('/submit')
def submit(session, d: dict):
    session.setdefault('form_data', {})
    session['form_data'] = d
    return prettyJsonTemplate(d)

# helper function to render out the session form
# because of the `hx_swap_oob`, this snippet can be returned by any handler and will update the form
# see https://htmx.org/examples/update-other-content/#oob
#
# `submitOnLoad` should be set to true for the initial page load so that the form will
# auto-submit to populate the results if there is saved state in the session
def session_form(session, submitOnLoad=False):
    session.setdefault('form_data', {})
    result = session.get('form_data', {})
    trigger = "input delay:200ms, load" if submitOnLoad and result else "input delay:200ms"
    session_form = Form(hx_post='/submit', hx_target='#result', hx_trigger=trigger, id="session_form", hx_swap_oob="#session_form")(
                    trueFalseRadioTemplate(label="Radio test. Set to true then refresh the page. fill form does not keep it true based on session state.", name="radio_test"),
                )
    fill_form(session_form, result)
    return session_form

serve()