Auto submit form element.
npm install @sonicgarden/auto-submit-form-elementA custom element that automatically submits forms when input values change, providing a seamless user experience for filtering, searching, and real-time form interactions.
- 🚀 Zero configuration: Works out of the box with any form
- ⚡ Flexible events: Listen to change, blur, or custom events
- 🎯 Targeted submission: Use specific submit buttons with the submitter attribute
- 🌐 Framework agnostic: Pure Web Components, works with any framework
- 📱 Lightweight: Minimal footprint with no dependencies
``bash`
npm install @sonicgarden/auto-submit-form-element
Import as ES modules:
`js`
import '@sonicgarden/auto-submit-form-element'
#### Basic Auto-Submit
The most common use case - automatically submit a form when a select dropdown changes. Perfect for filtering lists or search results.
`html`
#### Using a Specific Submit Button
When you have multiple submit buttons in a form and want to use a specific one for auto-submission. The submitter attribute specifies which button should be used.
`html`
#### Auto-Submit on Blur
Useful for search inputs where you want to submit when the user finishes typing and moves away from the field.
`html`
#### Multiple Event Types
Listen to multiple events for more responsive behavior. This example submits both when the value changes and when the user moves away from the field.
`html`
| Attribute | Description | Default |
|-----------|-------------|---------|
| events | Event names to listen for auto-submission, comma-separated. Supports any DOM event like change, blur, input, etc. | change |submitter
| | CSS selector for the submit button to use when auto-submitting. If not specified, the form's default submission behavior is used. | undefined` |
Browsers without native [custom element support][support] require a [polyfill][].
- Chrome
- Firefox
- Safari
- Microsoft Edge
[support]: https://caniuse.com/custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements
Distributed under the MIT license. See LICENSE for details.