I have a form that on submit does not trigger an action on sveltekit server but instead I have a handleSubmit function on the svelte module for that.

<script>

    export let data;

    let parentObject = writable({
        name: '',
        childObjects: []
    });


    function addChildObject() {
        parentObject.update(s => {
            s.childObjects.push({ name: '', something: '' });
            return s;
        });
    }

    async function handleSubmit(event) {
        event.preventDefault();
        parentObject.subscribe(data => {
             ....
</script>

<form class="parent-object-form" method="POST" on:submit={handleSubmit}> 
    ...

    <button type="button" on:click={addChildObject}>
        Add Child Object
    </button>

    <button type="submit">Submit</button>
</form>

I specifically don't have a server action because I dynamically modify the form by adding and removing fields from the object.

Whenever I submit this, I want the load function in the +page.server.js server file to be called again, because I also need to render a list of parentObjects that I fetch from a server.

<table>
    <tbody>
        {#each data.parentObejct as parent}
             ...
        {/each}

I need this list to get updated after the form is submitted. How do I do that?

Is there a way to manually trigger the load function after the submit? Should I manually add the new object to the list on the handleSubmit func? Is there a way to manually pass this dynamic data to a server action?

I have a form that on submit does not trigger an action on sveltekit server but instead I have a handleSubmit function on the svelte module for that.

<script>

    export let data;

    let parentObject = writable({
        name: '',
        childObjects: []
    });


    function addChildObject() {
        parentObject.update(s => {
            s.childObjects.push({ name: '', something: '' });
            return s;
        });
    }

    async function handleSubmit(event) {
        event.preventDefault();
        parentObject.subscribe(data => {
             ....
</script>

<form class="parent-object-form" method="POST" on:submit={handleSubmit}> 
    ...

    <button type="button" on:click={addChildObject}>
        Add Child Object
    </button>

    <button type="submit">Submit</button>
</form>

I specifically don't have a server action because I dynamically modify the form by adding and removing fields from the object.

Whenever I submit this, I want the load function in the +page.server.js server file to be called again, because I also need to render a list of parentObjects that I fetch from a server.

<table>
    <tbody>
        {#each data.parentObejct as parent}
             ...
        {/each}

I need this list to get updated after the form is submitted. How do I do that?

Is there a way to manually trigger the load function after the submit? Should I manually add the new object to the list on the handleSubmit func? Is there a way to manually pass this dynamic data to a server action?

• sveltekit

Share Improve this question Follow edited Nov 20, 2024 at 16:16 jonrsharpe 122k3030 gold badges267267 silver badges474474 bronze badges asked Nov 20, 2024 at 16:14 fedestfedest 1,35033 gold badges1616 silver badges3737 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

A form can be as dynamic as you want, that does not mean you cannot use form actions. You also can add things to the submitted form data via the enhance action.

If you use enhance, that already will trigger the load function, if you do not use it, you can manually call invalidateAll instead.