Purpose
Auto submits a form when its input's values change - i.e. autosave.
Use Cases
- An application where you have inline-editing. I.e. clicking on a name in your profile changes it to an input field to edit it. Can be used to submit the form when the user finishes editing the field, without needing a button press.
- Auto submitting a form to update page filters when a user changes a filter, or ticks a new category.
| Value | Type | Description | Default |
|---|
submitMode (Optional) | String | The mode to submit the form using, either direct or request.
direct calls .submit() on the form without dispatching the submit event.
request synthesizes a normal submit event on the form, a submit event will still be fired and any listeners that modify the behaviours of the form will still run.
| request |
eventMode (Optional) | String | A space separated string containing the names of the events to monitor the form for before submitting, either change, input or debounced.
change will monitor all inputs for change events, i.e. when the user clicks away from a changed input.
input will monitor all inputs for input events, i.e. every keypress the user types into a form input.
both will monitor all inputs for both change and input events | change |
debounceInterval (Optional) | String | The duration in milliseconds to debounce the events in eventModeValue by. | - |
Events
| Event | When | Dispatched on | event.detail |
|---|
- | - | - | - |
Side Effects
- Adds event listeners for
change or input (depending on the value of eventModeValue) to all <input> <textarea> and <select> elements in the controller's scope.
- If the
submitModeValue is request and the browser does not support .requestSubmit(), then the controller will use any existing submit buttons, or create a hidden submit button (which will be cleaned up on 'disconnect'), to submit the form by clicking on them.
See MSDN for details
How to Use
Drop the controller onto the form element you want to augment with auto-submit behaviour.
Annotate any inputs who changes that you dont want triggering a submit, with data-no-autosubmit, and the controller will ignore them.
All other <input>s, <textarea>s and <selects>s will trigger a form submission.