Skip to content

Server Helpers

Redirect after a form action, refresh a parent form, and update the browser.

View Markdown

Use Astro.locals.forms inside a Forms page with the shared setup.

src/pages/finish.astro
---
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.

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.

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.

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.