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 ) ???