I am trying to make the system like this:

1. Displays a first form page. After a user submit the form, redirects to the second form page.
2. Displays the second form page. When a user click a delete button on the page, redirects to the first form page.

However, when I click the delete button in 2, the old form values are still displaying on the first form page. I tried following methods:

1. preserveState:false on submit.

Inertia.post(props.deleteDraftUrl, null, {
                    preserveState: false
                });

this works for when I click a delete button on the first page, but when I click the one in the second page, the old form values are still displayed.

2. use preserveState:false of the form made by useForm.

form.post(props.deleteDraftUrl, {
                    preserveState: false
                });

This doesn't work too.

3. onSuccess: () => form.reset();

Inertia.post(props.deleteDraftUrl, null, {
                    preserveState: false,
                    onSuccess: () => form.reset(),
                });

This doesn't work too.

I have been stacked on this problem for a day. Any suggestions are helpful.

Updates: Added the entire code in the script of the component. The first page and the second page are pretty much the same. I also simplified and modified the code mostly for the security reasons.

import {useForm} from "@inertiajs/inertia-vue3";
import {Inertia} from "@inertiajs/inertia";

export default {
    props: {
        pageTitle: {
            type: String,
            required: true,
        },
        defaultValues: {
            type: Object,
            required: true,
        },
    },
    remember: ["form"],
    setup(props) {
        const form = useForm({
            value1: props.defaultValues.value1,
            value2: props.defaultValues.value2,
            value3: props.defaultValues.value3,
        });

        
        const deleteDraft = () => {
            if (confirm("delete the draft?")) {
                Inertia.post(props.deleteDraftUrl, null, {
                    preserveState: false,
                    onSuccess: () => console.log('success!'),
                });
            }
        };
        

        return {
            form,
            pageTitle,
            deleteDraft,
        };
    },
};
</script>

CodePudding user response：

Problem

You are passing the default values of your fields when initializing your form:

const form = useForm({
    value1: props.defaultValues.value1,
    value2: props.defaultValues.value2,
    value3: props.defaultValues.value3,
});

So when you reset the form, it will reset to those values.

Solution

You can update the defaults of your form before resetting.

Inertia.post(props.deleteDraftUrl, {
    onSuccess: () => {
        form.defaults({
            value1: null,
            value2: null,
            value3: null,
        });

        form.reset();
    },
});

If you have a lot of fields to reset, you can loop through the defaultValues to clear them.

Object.keys(form.data()).forEach(field => form.defaults(field, null));

form.reset();

CodePudding user response：

I found the problem and the answer. For some reasons, just another guy wrote a code that keeps the inputted values in the defaultValues variable at the first page's CONTROLLER! That's why it never clears form.

So the answer is : Making the process which keeps the inputted values in the defaultValues variable not working after submitting a deleting-draft form.

Sorry for the stupid cause, and "preserveState : false" seems to work fine.