Submitting form on main page from within dialog
Hi there, I'm using shadcn/ui for my UI and i'm trying to figure out how to make a form confirmation dialog. The
<Button type="submit">Upgrade</Button> doesn't seem to submit the form on the outside of the dialog.
Here is my code:
<Form {...ratingForm}>
<form
onSubmit={ratingForm.handleSubmit((v) => {
startTransition(() =>
updateRating(member.id, {
comment: v.comment,
rating: v.rating,
})
);
})}
className="space-y-2"
>
<FormField
control={ratingForm.control}
name="rating"
render={({ field }) => (
<FormItem>
<FormLabel className="text-md">
Member: {member.name_first} {member.name_last}
</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={member.rating.toString()}
>
<FormControl>
<SelectTrigger className="w-[180px]">
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="1">OBS</SelectItem>
<SelectItem value="2">S1</SelectItem>
<SelectItem value="3">S2</SelectItem>
<SelectItem value="4">S3</SelectItem>
<SelectItem value="5">C1</SelectItem>
<SelectItem value="7">C3</SelectItem>
<SelectItem value="8">I1</SelectItem>
<SelectItem value="10">I3</SelectItem>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={ratingForm.control}
name="comment"
render={({ field }) => (
<FormItem>
<FormControl>
<Input placeholder="Comment..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Dialog>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently upgrade
the member's rating without any possibility to reverse
it.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button type="submit">Upgrade</Button>
</DialogFooter>
</DialogContent>
<DialogTrigger asChild>
<Button>Upgrade</Button>
</DialogTrigger>
</Dialog>
</form>
</Form>
<Form {...ratingForm}>
<form
onSubmit={ratingForm.handleSubmit((v) => {
startTransition(() =>
updateRating(member.id, {
comment: v.comment,
rating: v.rating,
})
);
})}
className="space-y-2"
>
<FormField
control={ratingForm.control}
name="rating"
render={({ field }) => (
<FormItem>
<FormLabel className="text-md">
Member: {member.name_first} {member.name_last}
</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={member.rating.toString()}
>
<FormControl>
<SelectTrigger className="w-[180px]">
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="1">OBS</SelectItem>
<SelectItem value="2">S1</SelectItem>
<SelectItem value="3">S2</SelectItem>
<SelectItem value="4">S3</SelectItem>
<SelectItem value="5">C1</SelectItem>
<SelectItem value="7">C3</SelectItem>
<SelectItem value="8">I1</SelectItem>
<SelectItem value="10">I3</SelectItem>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={ratingForm.control}
name="comment"
render={({ field }) => (
<FormItem>
<FormControl>
<Input placeholder="Comment..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Dialog>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently upgrade
the member's rating without any possibility to reverse
it.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button type="submit">Upgrade</Button>
</DialogFooter>
</DialogContent>
<DialogTrigger asChild>
<Button>Upgrade</Button>
</DialogTrigger>
</Dialog>
</form>
</Form>
0 Replies