Submit Form on:change

[azakiio]

Describe the problem

I'm trying to build a live search box that is running the search on:change.

Not sure how to programmatically submit a sveltekit form while not reloading the page.

Describe the proposed solution

Something similar to this https://remix.run/docs/en/v1/hooks/use-submit

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response

[dummdidumm]

You can programmatically dispatch an event from the form by getting a reference to the form element and call it when appropriate:

<script>
	let form;
</script>

<form bind:this={form}>
	<input
		type="text"
		name="search"
		on:change={() => form.dispatchEvent(new Event('submit', { bubbles: true }))}
	/>
</form>

[geoffrich]

You can use form.requestSubmit():

<script>
	let form;
</script>

<form bind:this={form}>
	<input
		type="text"
		name="search"
		on:change={() => form.requestSubmit()}
	/>
</form>

In contrast with form.submit() which only submits the form, this will trigger everything (validation, submit event handling, etc) that would happen if a user clicked the 'Submit' button.

Though note that by default SvelteKit will reset browser focus, which can be disruptive if you're submitting the form on each change. If you don't want that, see #7895 for workarounds.