Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTMX does not work on a cloned form element #3140

Open
ncpa0cpl opened this issue Jan 21, 2025 · 2 comments
Open

HTMX does not work on a cloned form element #3140

ncpa0cpl opened this issue Jan 21, 2025 · 2 comments

Comments

@ncpa0cpl
Copy link

If a form, that otherwise work with HTMX just fine, gets cloned and placed into the document, it will not trigger htmx requests as defined by that form hx- attributes when submitted.

Reproduction:

Open the below html in a browser, click the "edit" button (this will clone the form above it and insert it into the page replacing the button). The newly inserted form does not work with htmx, submitting that form will instead trigger a page reload (default form behavior)

<html>
    <head>
        <script
            src="https://unpkg.com/[email protected]"
            crossorigin="anonymous"
        ></script>
    </head>
    <body>
        <div>
            Original:
            <form
                hx-trigger="submit"
                hx-include="#form_1"
                hx-patch="/api/sometask"
                hx-swap="none"
                id="form_1"
            >
                <input value="123" name="id" />
                <button type="submit">Submit</button>
            </form>
        </div>
        <div id="root">
            Copy:
            <div id="hereGoesForm">
                <button onclick="showform()">Edit</button>
            </div>
        </div>
        <script>
            function showform() {
                const form = document.getElementById("form_1");
                const hereGoesForm = document.getElementById("hereGoesForm");

                const formCopy = document.importNode(form, true);
                hereGoesForm.replaceWith(formCopy);
            }
        </script>
    </body>
</html>
@Telroshan
Copy link
Collaborator

Hey, I think you'll want to use htmx.process on the cloned form here!
See the 3rd Party Javascript section of the docs for more details.

Hope this helps!

@ncpa0cpl
Copy link
Author

it does seem to work after adding htmx.process call, though I'd expect this to work out of the box with any vanilla js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Telroshan @ncpa0cpl