What's the recommended way to use PyScript on form submit?

[lwcorp]

I found neither in the documentation nor the discussions nor the examples how to do it.
Could you document somewhere like https://docs.pyscript.net/latest/reference/faq.html how to best run PyScript after a web form is submitted?

For example, how to display the value of test in:

<form>
<input name="test" value="display this value">
</form>

?

Thanks!

[FabioRosado]

I have a local branch which adds docs to the py attributes, but I'm waiting for #1120 to be merged so I can make the necessary changes to the local branch.

Here's how you can handle forms in pyscript:

        <form id="form" py-submit="submit_handler()" reset="reset_handler()">
            <label for="email">Email:</label>
            <input 
            id="email" 
            name="email" 
            type="email" 
            placeholder="your.email@example.com"
            py-input="email_input_handler()" 
            >
            <div class="mt-6">
                <button type="submit">Submit</button>
                <button type="reset">Reset</button>
            </div>
        </form>

And the python code for the pyscript tag:

form_values = {
    "email": "",
    "like-level": ""
}

def submit_handler(event = None):
    if event:
        event.preventDefault()
        print(f"Form values are: {form_values}")

def reset_handler(event = None):
    if event:
        form_values = {
            "email": "",
            "like-level": ""
        }

        print(f"Form values are: {form_values}")

def email_input_handler(event = None):
    if event:
        form_values["email"] = event.target.value

# Now map the event handlers to the elements
Element("email").element.oninput = email_input_handler
Element("form").element.onsubmit = submit_handler
Element("form").element.onreset = reset_handler

Hope this helps 😄

As I mentioned once that PR that I linked above, it will make working with events much nicer and we can remove the mapping of the event handlers to the elements

[lwcorp]

Nice! Can it be added to the FAQ and examples?

But first there is one issue - your example doesn't support initial values like <input id="email" value="initial value">, so here's my attempt to support it using form_values["email"]=Element("email").element.value which is of course annoying since it's manual and one might have lots of fields...

        <form id="form" py-submit="submit_handler()" reset="reset_handler()">
            <label for="email">Email:</label>
            <input 
            id="email" 
            name="email" 
            type="email" 
            placeholder="your.email@example.com"
            value="initial@value.com"
            py-input="email_input_handler()" 
            >
            <div class="mt-6">
                <button type="submit">Submit</button>
                <button type="reset">Reset</button>
            </div>
        </form>

<py-script>
form_values = {
    "email": "",
    "like-level": ""
}

def submit_handler(event = None):
    if event:
        event.preventDefault()
        print(f"Form values are: {form_values}")

def reset_handler(event = None):
    if event:
        form_values = {
            "email": "",
            "like-level": ""
        }

        print(f"Form values are: {form_values}")

def email_input_handler(event = None):
    if event:
        form_values["email"] = event.target.value
        
form_values["email"]=Element("email").element.value

# Now map the event handlers to the elements
Element("email").element.oninput = email_input_handler
Element("form").element.onsubmit = submit_handler
Element("form").element.onreset = reset_handler
</py-script>

[FabioRosado]

Yes, as I mentioned as soon as that PR is merged, I will rework on the working branch that I have locally and will include some examples 😄