SheetLink Forms beta

AJAX submit

Definition

An AJAX submit is a form submission sent by JavaScript - via fetch or XMLHttpRequest - instead of the browser's native full-page navigation. The script gathers the field values, POSTs them in the background, reads the response, and updates the page in place: a success message where the form was, an error beside the field that caused it, no reload anywhere.

The appeal is continuity. A native submit tears down the page, and on single-page applications there may be no "next page" to navigate to at all. AJAX keeps the visitor exactly where they were, which is why nearly every form on a JavaScript-rendered site submits this way.

The costs are responsibilities. The script must handle the failure states the browser used to handle - timeouts, error responses, double submits - and the endpoint must cooperate by returning machine-readable answers (JSON, not a redirect) and by allowing cross-origin requests when the form and the endpoint live on different domains. Done carefully, AJAX is layered on top of a working form action rather than replacing it, so the form still submits the old-fashioned way when JavaScript fails.

How SheetLink Forms uses it

The SheetLink Forms embed implements this layering. Add sl.js once and it binds any form marked data-sheetlink and any form whose action already points at /f/, upgrading the submit to AJAX with inline success or error text; the endpoint answers JSON callers with {"ok":true,"id":"..."}. Late-rendered forms in SPAs are bound via MutationObserver, sheetlink:success and sheetlink:error events bubble for custom handling, and the plain form action remains as the no-JavaScript fallback.

Embed attributes and events are documented in the developer docs; the full submit-to-row pipeline is on how it works.

Related terms: Form action · Thank-you page · Preflight request