Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

gambino's avatar

How do I use recentlySuccessful when using axios?

I'm using axios to get the request, is there any way I can use the recentlySuccessful prop provided by useForm? Currently it stays false because I'm not using the default post request of the form.

    const { data, setData, post, processing, errors, reset, setError, recentlySuccessful } = useForm({
        name: company.name,
        description: company.description,
        logo: company.logo,
    });

    const onSubmit = (e) => {
        e.preventDefault()
        setUpdating(true)
        axios.put(route('company.update', company.id), data).then(res => {
            setUpdating(false)
            onSuccess(res.data)
        }).catch(err => {
            setError(err.response.data.errors)
            setUpdating(false)
        });
    }
0 likes
9 replies
Nakov's avatar

Instead of deconstructing the object like this:

const { data, setData, post, processing, errors, reset, setError, recentlySuccessful } = useForm({
        name: company.name,
        description: company.description,
        logo: company.logo,
    });

why don't you do this:

const form = useForm({
        name: company.name,
        description: company.description,
        logo: company.logo,
    });

and then in onSuccess just use form.recentlySuccessful which as the documentation says it will be true just for 2 seconds:

When a form has been successfully submitted, the wasSuccessful property will be true. In addition to this, forms have a recentlySuccessful property, which will be set to true for two seconds after a successful form submission. This property can be utilized to show temporary success messages.

1 like
gambino's avatar

@Nakov so I changed it up to this

    const form = useForm({
        name: company.name,
        description: company.description,
        logo: company.logo,
    });

    const onSubmit = (e) => {
        e.preventDefault()
        setUpdating(true)
        axios.put(route('company.update', company.id), form.data).then(res => {
            setUpdating(false)
            console.log(form.recentlySuccessful)
            onSuccess(res.data)
        }).catch(err => {
            setUpdating(false)
        });
    }

Thanks for the reply, recentlySuccessful still just returns false, my guess is because I am using Axios instead of the useForm's built in request but I'm not sure.

Nakov's avatar

@gambino yeah, that makes sense. Any special reason why you use axios?

1 like
gambino's avatar

@Nakov I'm using a modal to edit company details on the company page. And on success I simply close the modal and update the company details on the page without needing to redirect and get the entire page data again.

Nakov's avatar

@gambino And why not use the useForm for that too?

form.put('/company/update', {
  onSuccess: () => form.recentlySuccessful, // should work here
})
1 like
gambino's avatar

@Nakov I'd love to but Inertia's request wont let me return json sadly, I have to redirect or render the same page. Honestly have been confused on this topic for days now.

All Inertia requests must receive a valid Inertia response, however a plain JSON response was received.

Please or to participate in this conversation.