Server Helpers
Redirect after a form action, refresh a parent form, and update the browser.
View MarkdownUse Astro.locals.forms inside a Forms page with the shared setup.
Show feedback before redirecting
Section titled “Show feedback before redirecting”---import { BButton, BindForm } from '@astro-utils/forms/forms.js';import Layout from '../layouts/Layout.astro';
let message = '';
function finish() { message = 'Done. Returning to the home page in two seconds.'; Astro.locals.forms.redirectTimeoutSeconds('/', 2);}---<Layout> <span slot="title">Finish a task</span> <BindForm> <BButton onClick={finish}>Finish</BButton> <p role="status">{message}</p> </BindForm></Layout>redirectTimeoutSeconds sends a browser action, so the user sees the rendered feedback before navigating. Use redirect('/account') in the callback when you want an immediate HTTP redirect instead.
Refresh a parent after a child action
Section titled “Refresh a parent after a child action”A form rerenders after its own action. Call reloadState() only when a nested form changes data shown by its parent. The editable users example demonstrates deletion and the parent’s count updating together.
For database-backed parent data, attach a loader to bind.on.reloadState. A reload does not run the original button callback again.
Choose a helper
Section titled “Choose a helper”| Helper | Use it for |
|---|---|
redirect(url, status?) |
An immediate server redirect. |
redirectTimeoutSeconds(url, seconds?) |
Render feedback, then navigate in the browser. |
reloadState() |
Rerender a parent affected by a child action. |
updateSearchParams() |
Change several URL query values, then call the returned redirect(). |
updateOneSearchParam(key, value?, status?) |
Change or remove one query value and redirect. |
alert(message) |
Show a browser alert. Prefer inline feedback for ordinary validation. |
consoleLog(...values) / console(type, ...values) |
Log in the browser. |
callFunction(name, ...args) |
Call an existing browser function. |
Stop a nested operation with a response
Section titled “Stop a nested operation with a response”Use ThrowOverrideResponse when a nested function must stop processing and return a response. Setting a redirect and throwing a response serve different control-flow needs; ordinary form callbacks usually only need the redirect helper.