Form with Multiple steps with the help of Stepper

[priyangshu-datta]

I was working on a basic todo app, and wanted to try implementing form with multiple steps to the add todo feature. It is a simple 2 step process, asking for todo text and if it is completed.
I have tried:

<script lang="ts">
	import { enhance } from '$app/forms'
	import AddTodo from './addTodo.svelte'

	let addForm: HTMLFormElement
</script>

<form bind:this={addForm} action="?/addTodo" method="post" use:enhance>
	<AddTodo {addForm}>
		<div slot="step_1">
			<input
				type="text"
				class="input px-3 py-1"
				name="todo"
				placeholder="What will you do?"
				value="Master Svelte"
			/>
		</div>
		<div slot="step_2">
			<label for="complete" class="label">
				<span>Completed: </span>
				<input type="checkbox" name="complete" class="checkbox" checked={false} />
			</label>
		</div>
	</AddTodo>
</form>

addTodo.svelte:

<script lang="ts">
	import { Step, Stepper } from '@skeletonlabs/skeleton'
	export let addForm: HTMLFormElement
</script>

<Stepper
	on:complete={() => {
		addForm.submit()
	}}
>
	<Step>
		<slot name="step_1" />
	</Step>
	<Step>
		<slot name="step_2" />
	</Step>
</Stepper>

But the form data does not contain the todo text, and the page reloads, though I have used use:enhance.

[endigo9740]

@priyangshu-datta Any reason you abstracted the stepper to a sub-component? I'd recommend dropping the Stepper directly into the page so it's in the same scope. Test and confirm if that works, then you'll know if you're abstraction is valid here or not (I'm not sure it is).

Additionally I'd recommend looking at the props we provide for steppers:
https://www.skeleton.dev/components/steppers

We include a way to set the type attribute for each button. If you set the buttonCompleteType="submit" it will act as a submit button, so no need for the on:complete event handler.

[priyangshu-datta]

Thanks

[AdrianGonz97]

Unfortunately, you can't use native forms in a Stepper in this way.

You need to bind the values of the inputs in previous Steps, just like how you showed in your provided workaround. When you step through a Stepper, the elements of previous steps are removed from the DOM, therefore, the form is no longer able to see the values of those inputs. This is why when you submit the form, the only value that is submitted is completed and not todo.

If you were to submit the form by pressing Enter when you're on the first step, you should see that the todo is submitted instead of the completed value.

[endigo9740]

@AdrianGonz97 good call. To add to this, I believe other folks have worked around this by creating multiple forms - one per step. I'm not sure the mechanics for combining the data, but it likely involves binding as well.

[priyangshu-datta]

@endigo9740 Yes this can likely be done, if form submission is emulated by submit event handler, and form data is written from the bindings. Not sure if multiple forms are required.

@AdrianGonz97 Regarding pressing Enter key, I have a query. Is there any way to attach an event listener for Keyboard events, such that, when Enter is pressed, Next button is clicked, and next event is dispatched, in the Stepper?

[Sarenor]

I think if you're already manipulating data during form submission through the data bound in previous steps, one form should be enough? Could be enough? I'd try having one form containing the Stepper and restricting submission until the stepper is done.
Or just skip the form completely and do a Fetch-Post instead if you already need multiple steps & data binding, that's probably easier.

In regards to the key event listener, I would attach that to the form instead of the stepper, probably. You'd still need some document.getElementBy() shenanigans to click the next button though since there's no way to programmatically do that via the Stepper.
Or, again, you just don't use a form since that's probably more hassle than it's worth during a multi-stage submission process.