Forms
Stim.js can accelerate form submissions, similar to link preloading.
If configured, forms will load inline and the POST request will be sent over XHR to avoid a full page reload.
Configuration
To enable this feature, set the stim-post
property on a <form>
tag:
<form method="post" action="/target" stim-post>
The value of stim-post
can be set to a custom target URL. If set without a value, the action
will be used instead.
Only post
(default) and get
methods are supported:
POST forms
A request is sent to the target URL with FormData
. This mimics a regular browser form submission.
GET forms
The target URL will be loaded with its query string. This is an internal page load via Stim.navigate()
.
API
Forms will be scanned and configured whenever Stim.js first loads, and whenever it navigates to another page through preloading.
If the contents of your page have dynamically changed, you can force a manual update as well:
Stim.Forms.update();
stim-before-submit
Before a form is submitted, Stim.js will emit the stim-before-submit
event on the document. This event is cancelable to prevent the submission from going ahead.
event.detail.form
- references the form elementevent.detail.url
- the URL Stim.js will submit the form to via POST