<sl-switch> not appearing in FormData

[rctneil]

Hi,

I have an <sl-switch> as below:

<sl-switch name="poi" checked data-action="sl-change->filters#submit">Points of Interest</sl-switch>

I am outputting the value of the forms FormData into the console but the switch value is missing in both a checked a checked state.

The other inputs (both <sl-select>s show up correctly.

I have tried using an <input> (as below) in place of the <sl-switch> and that works (albeit only in a checked state).

<input type="checkbox" checked name="poi2" data-action="change->filters#submit" />

How can I get the <sl-switch> to show in my console.log in both on and off states?

My code that runs when any form element is changed is:

    submit() {
        let data = new FormData(this.formTarget);
        for (let [key, value] of data) {
            console.log(key + ': ' + value);
        }
    }

[claviska]

Switches, like checkboxes, will only show up in form data when they're checked. This is by design and consistent with native checkboxes.

Here's an example: https://codepen.io/claviska/pen/rNrMdbO?editors=1010

You can think of it like this: textfields and textareas always have a value (even when they're empty) but, if you disable them, they no longer show up in form data. Unchecking a checkbox/switch is very much like disabling the control. When it's unchecked, you get nothing. When it's checked, you get whatever the value is set to which could be any string — even an empty one.

[rctneil]

@claviska Ah! Found the issue. I had not added a value to the <sl-switch>. Why does an <sl-switch> require a value, yet a regular <input type="checkbox"> does not?

[claviska]

Now that is a bug. It should have used the same logic as checkboxes, but there was no default set when the value was empty. Fixed in 27f6344 so this will be available in the next release.