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

nhayder's avatar
Level 13

How to disable Buy now Button till page redirects

i'm using laravel 8 with inertial with vuejs, i have a payment form with Buy Now submit button which is disabled till the payment is saved to DB?

This is my from comp

<form @submit.prevent="form.post(route('payments.store')), {
            preserveScroll: true,
            onSuccess: () => form.reset(),
            forceFormData: true,
            _method: 'put',
          }">
                <input type="text" v-model="form.name" name="name" required="true">
                <input type="email" v-model="form.email" name="email" required="true">
                <input type="text" v-model="form.phone" name="phone" required="true">
				<PayButton :type="'submit'" :disabled="form.processing">PAY NOW</PayButton>
</form>

<script>
export default {
  components: { PayButton },
  props: {
    link : Object
  },
  setup () {
    const form = useForm({
      name : null,
      email : null,
      phone : null,
    })

    return { form }
  },
formatPrice(value) {
        let val = (value/1).toFixed(2).replace('.', ',')
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
    }
  }
};
</script>

the form is hitting a laravel controller like this

public function store(Request $request)
    {
        
        $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email',
            'phone' => 'required|numeric',
        ]);

        $payment = Payment::create([
            'name' => $request->name,
            'phone' => $request->phone,
            'email' => $request->email,
        ]);
        
        $checkOutPage = 'https:// ..
		
        return Inertia::location($checkOutPage);

    }

the submit button is disabled till laravel attempts to redirect to checkout page.

// during this redirect the button is enabled 
    return Inertia::location($checkOutPage);

up to this point the submit button is disabled, but when the redirect function starts it getting enabled so the user can see the pay now button enabled.

My question is this: Is there is a way to force inertial to keep the submit button disabled for longer time ( 5 sends ) ???

0 likes
4 replies
Maria30's avatar

Hi @nhayder, I checked the docs and I saw that button type submit is like this <button type="submit" :disabled="form.processing">Example button</button>

You have it like this :type="'submit'" . You are also using the form helper inertia provides. Have you set it up correctly? If you use Vue 3 you need to import it first thing in the script import { useForm } from '@inertiajs/inertia-vue3'

Anyway, a very simple fix on what you want is to

setTimeout(() => {
form.reset();
}, 5000);
1 like

Please or to participate in this conversation.