I’ve got a form with 2 buttons:
<form method="POST" class="pt-10">
<div class="flex flex-row pt-10">
<button type="submit" name="save-and-exit" class="btn btn-primary btn-lg">{ mode == "new" ? "Save and Exit" : "Update and Exit" }</button>
</div>
<div class="flex flex-row pt-10">
<button type="submit" name="add-tracks" class="btn btn-primary btn-lg">{ "-> Tracks" }</button>
</div>
</form>
Omitting the fields in form for simplicity.
My action looks like this:
export const actions = {
default: async ({ request, fetch }) => {
// create API instance
const recordAPI = new RecordAPI(fetch);
// retrieve the data from the form
const data = Object.fromEntries(await request.formData());
// validate data and create DTO
const record = recordDTO(data);
// if errors returned from building the DTO (validation errors) then return the object.
if (record?.errors && !emptyObject(record.errors)) {
return {
"data": record.data,
"errors": record.errors,
};
}
// save the data
const response = await recordAPI.post(record);
if (response.status == 200) {
throw redirect(302, '/records')
}
return {
data: record,
"errors": response.errors,
}
}
In the action
function, is there a way to know which of the 2 buttons was the one that submitted the form? I need to know this since the flow is gonna be different depending on that.
One solution I can think of is updating the form to something like this:
<form method="POST" bind:this={formElement}>
then manually append the name of the button to the form and trigger formElement.requestSubmit()
, but I was wondering if there’s a way to do it directly in the action
, I believe it looks more ‘elegant’.
Thanks.