Disable form and show spinner on submit button on form request

[MuhammadSaim]

Hi.! I hope you are all doing great.

I'm facing an issue while submitting a form using Inertia form helper onStart and onFinish but these callbacks are not setting the vue progress data set to true or false.

Thanks

export default {
    props: {
        errors: Object
    },
    data() {
        return {
            progress: false,
            form: this.$inertia.form({
                email: null,
                password: null,
                _token: this.$page.props.csrf_token
            })
        };
    },
    components: {
        AppLayout,
        Head,
        Link
    },
    methods: {
        submit() {
            this.form.post(this.route("login"), this.form, {
                onStart: () => (this.progress = true),
                onFinish: () => (this.progress = false)
            });
        }
    }
};

[ajnsn]

You are setting this.form as the 2nd parameter to form.post(). The method signature is form.post(url, options)
Here is a corrected version that should work:

submit() {
    this.form.post(this.route('login'), {
        onStart: () => (this.progress = true),
        onFinish: () => (this.progress = false),
    });
}

[MuhammadSaim]

Oh.! Thanks mate

[azizullahsaeidi]

In Vue 3 we can handle submit's disable functionality like below

setup(){

  const isEnabled = ref(false)
  const form = reactive({
    date: null,
    note: null,
    hours: null,
    _token: usePage().props.value.csrf_token
  })
  
  // Submit the form
  function submit() {
    Inertia.post(route('time-sheet.store'), form, {
        forceFormData: true,
        onStart: () => (isEnabled.value = true),
        onFinish: () => {isEnabled.value = false; resetForm},
    });
  }

  // Reset the form content
  function resetForm(){
    form.hours = null;
    form.date = null;
    form.note = null;
  }

}