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

Kris01's avatar

Form Reset Inertia

Hello guys,

I have a small problem. When I submit my form the everything works fine, the inputs in the database are sucessfully updated, but I can't seem to reset the form to the new values. I have to reload the page to see the new values.

this is how I submit the form, form.reset() seems like it's not working

const saveSettings = (form) => {
  const url = route("settings.update",{id:settings.id});
  form.patch(url, {
    preserveScroll: true,
    onStart: () => Spinner.content({content:"Saving Settings..."}),
    onSuccess: (response) => {
      const { props: { flash: { success:{message} }}} = response;
      console.log('form reset');
      console.log(form.reset());
      form.reset();
      Alert.success(message);
    },
    onError: async ({message , status}) => {
      (status === 500) && await Alert.error(message);
    }
  });
}
0 likes
6 replies
Sinnbeck's avatar

Do you mean that it should update with the data from the server?

Try telling inertia to not preserve state

 form.patch(url, {
    preserveScroll: true,
    preserveState: false, //update with server data through props again
1 like
Kris01's avatar

@Sinnbeck This works, but brings a problem with itself. The problem is that if there is an error don't show up, maybe they are overwritten?

Sinnbeck's avatar

@Kris01 No it shouldnt reset anything in case of validation errors. I never use onSuccess() and onErrror. I use the returned props to update the page so its reactive

1 like
tykus's avatar
tykus
Best Answer
Level 104

You need to update the form defaults; so reset will use the new values.

If your form's default values become outdated, you can use the defaults() method to update them. Then, the form will be reset to the correct values the next time the reset() method is invoked.

// Set the form's current values as the new defaults...
form.defaults()

// Update the default value of a single field...
form.defaults('email', '[email protected]')

// Update the default value of multiple fields...
form.defaults({
  name: 'Updated Example',
  email: '[email protected]',
})

https://inertiajs.com/forms

2 likes
azimidev's avatar

here is how i used reset:

const { data, setData, post, patch, processing, errors, clearErrors, reset, setError } = useForm({
		timestamp: 0,
		content: '',
	});

then you can use reset('content'); to clear specific field or reset(); to clear all.

to show another example of usage:

function updateComment() {
		post(route('comment.store'), {
			preserveScroll: true,
			onSuccess: () => {
				reset('content');
				clearErrors();
			}
		});
	}

Please or to participate in this conversation.