Checkbox is disappearing?

[rlitchfield-Edcara]

First...thank you for such an amazing tool, HTMX is great!!

For context, when a checkbox is checked, I want to remove the value from the propulsion_total number. When I remove the check, I want to add the number back onto the propulsion_total number. As each checkbox will have a different value, the value is sent to a Flask server, and the server returns the new value. That works as expected. I am doing the calculation on the server for a specific reason that I won't get into here.

I am using a hidden input as well because when a checkbox is first checked, it triggers the server, but sends no actual data so I have no idea the value or which checkbox is sending the information.

This works as I expect, except there is an issue, the checkbox disappears after I update the power_remaining value. Using the browser's dev tools everything between the form tags disappears.

Any suggestions?

<span class="panel_label">Remaining: </span><span id="power_remaining">{{ propulsion_total }}</span>mW
<form hx-post="{{ url_for('panel2_propulsion') }}" hx-trigger="change" hx-select="#power_remaining">
    <label class="switch">
        <input type="hidden" id="mining" name="mining" value="-500">
        <input type="checkbox" id="mining" name="mining" value="500">
        <span class="slider2"></span>
    </label>
</form>

Also posted on the Discord server as per recommendation. :)

Robert

[Telroshan]

Hey, I may be off the mark but is is volontary to use hx-select instead of hx-target here?

What I think is happening: given that no hx-target is specified, it defaults to this, i.e. swaps the response into your form. Given that no hx-swap is defined, the default innerHTML swap strategy applies, effectively replacing (clearing) your form's content

Cf the hx-select, see how it's the button itself that gets swapped out when no hx-target is specified.