SMUI sveltekit Textfield always null on form submit

Question

I've just started using SMUI and sveltekit and I'm running into an issue . . .

I'm using the Textfield component in a login form, and this doesn't work:

<form method="post">
    <Textfield variant="outlined" bind:value={username} label="Username"></Textfield>    
    <Textfield type="password" variant="outlined" bind:value={password} label="Password">
    <Button type="submit">Login</Button>
</form>

Which posts to a page with this code:

export const actions = {
    default: async ({ cookies, request }) => {

        const data = await request.formData()
        const username = data.get('username')
        const password = data.get('password')
    }
}

username and password are both null on submit.

To make this work, I insert "shadow" hidden fields

<form method="post">
    <Textfield variant="outlined" bind:value={username} label="Username"></Textfield>    
    <input type="hidden" name="username" value={username}>
    <Textfield type="password" variant="outlined" bind:value={password} label="Password">
    <input type="hidden" name="password" value={password}>
    <Button type="submit">Login</Button>
</form>

And then I get values for username and password. I'm assuming I don't need to do this - what am I doing wrong?

Edit 2022-10-17 It was suggested that I add a "name" parameter to the textfields like so:

    <Textfield variant="outlined" value="" name="username"></Textfield>
<Textfield type="password" variant="outlined" value="" name="password"></Textfield>

That also doesn't work - when the values come over for the form they are both null.

Other ideas?

score 4 · Accepted Answer · answered Oct 17 '22 at 21:19

4

You can specify the name of the nested input element like so:

<Textfield input$name="username" ... />

answered Oct 17 '22 at 21:19

Ian Douglas

96
2

1

That's the magic formula! Strange that this isn't really called out in the docs in a way that people could notice. – user20232084 Oct 18 '22 at 13:41
1

To be fair, on their main Github page they state: `"You can add props to lower components and elements with "$" props, like input$maxlength="15".` I tried to add to their **demo** site which is the documentation site that you see, but gave up as the build process (which is for the entire library) seemed too onerous. I agree that the documentation should be specific, especially since idiomatic Sveltekit/Svelte is to 'use the platform' and do things simply utilising features such as the `
` element.
– Ian Douglas Oct 18 '22 at 20:55

score 0 · Answer 2 · answered Oct 13 '22 at 15:38

0

Form fields are only submitted if they have a name attribute. The bindings are completely irrelevant, you only need them if you want to use the values elsewhere in the code or component.

answered Oct 13 '22 at 15:38

H.B.

166,899
29
327
400

See above - adding "name" attribute doesn't work either. Nor does removing the bindings entirely. – user20232084 Oct 17 '22 at 19:57
1

You are using components, not native DOM elements, so the attribute does not necessarily have to be named the same (or even be forwarded at all for that matter). Apparently for SMUI, attributes that should be forwarded have to be prefixed, in this case with `input$`, so you get `input$name`. – H.B. Oct 18 '22 at 04:26

score 0 · Answer 3 · answered Mar 13 '23 at 22:26

You can create a normal input field and mark it as hidden, and then set the value with 2 way binding:

    <Select variant="filled" bind:value={selectedUserId} label="User">
      <Option value="" />
      {#each usersList as user}
        <Option value={user.id}>{user.firstName} {user.lastName}</Option>
      {/each}
    </Select>
    <input hidden name="user-select" value={selectedUserId} />

SMUI sveltekit Textfield always null on form submit

3 Answers3