Form with id or input named "id" causes error

[wingedpig]

If I have a form with an ID, I get an "e.id.replace is not a function" error. If I remove the ID, then everything works fine, but unfortunately, we need to be able to reference the form in our code.

Here is a jsfiddle to demonstrate the problem: https://jsfiddle.net/wingedpig/fjqguda1/17/

Edit: Including the source here as well:

<!-- load demo environment -->
<script src="https://demo.htmx.org"></script>

<!-- get /foo -->
<button hx-get="/foo" hx-target="#result">
    Test
</button> 
    <output id="result"></output>
<!-- respond to /foo with some dynamic content in a template tag -->
<template url="/foo">
<form method="post" id="modForm" action="#">
    <div class="table-responsive">
        <table id="records" class="table table-condensed table-fixed table-striped table-hover">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" id="2016" name="id" value="2016">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" id="2013" name="id" value="2013">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</form>
</template>

Edit: After further exploring, if I change the name of the checkboxes from "id" to anything else, it works.

[Telroshan]

Digged into it, it's because typing formElement.anything returns all inputs declaring that anything as their name, as an object or an array if there are several of them. You can see observe behaviour in this JSFiddle

In the htmx code, logic relying on the id attribute currently accesses it via element.id, so when it does that on a form element, that contains inputs declaring name="id", of course, this element.id doesn't return the expected value (which would be a string) and breaks.

Going to submit a PR soon to fix that issue