htmx form submission doesn't work (probably just in web components)

[faizanakram99]

I've this form, it is added dynamically via javascript but when i click the Submit button, the whole form is submitted with get method via browser (not via ajax) and whole page reloads.

What I am doing wrong ?

I tried adding hx-trigger="submit", doesn't help.

The form is inside fast-tab-panel from (fast.design) web components (if it helps)

"htmx.min.js" is included in the page

<form hx-post="/numbering-schemes/new" hx-swap="outerHTML">
    <table class="styled">
        <tbody><tr>
            <td>
                <input type="text" name="create_numbering_scheme[scheme][prefix]" title="" placeholder="Prefix" class="small">
                <input type="text" name="create_numbering_scheme[scheme][sequenceStart]" title="" required="" placeholder="Start" class="medium" min="1" inputmode="numeric" pattern="\d+">
            </td>

            <td>
                <input type="date" name="create_numbering_scheme[withEffectFrom]" required="" value="2022-12-16" min="2022-12-16">
            </td>

            <td>
                <select name="create_numbering_scheme[vatNumberIdOrSubsidiary]">
                    <option value="" selected="">All</option>
                                            <option value="FA">FA</option>
                                            <option value="YAKDAM">YAKDAM</option>
                                    </select>
                <input type="hidden" name="create_numbering_scheme[module]">
            </td>
            <td></td>
            <td>
                <button type="submit" class="btn--raised btn--primary">
                    Save
                </button>
            </td>
        </tr>
    </tbody></table>
</form>

[David-Guillot]

Hi @faizanakram99 ,

If the form is added to the DOM by some JS, you need to make htmx parse it, by using htmx.process().

[faizanakram99]

Hi @faizanakram99 ,

If the form is added to the DOM by some JS, you need to make htmx parse it, by using htmx.process().

Thanks, that works.

[alarbada]

Sorry to bump this up, but if I call the htmx.process() inside the onConnectedCallback method, does that require of a call to a possible unsubscribe method from htmx? Something that should go into the disconnectedCallback part I mean.

In other words, does calling htmx.process inside a web component that connects and disconnects from the DOM lead to a memory leak?