Form events
Using event binding to use our native form statuses to create custom experiences
Below is a list of the custom events you have access to.
Event
Description
ajax-form-failure
This event is fired if a form is submitted, but comes back to validation error
ajax-form-progress
This event fires multiple times for forms that have File fields. Returns an event that can be used to show upload progress to a visitor.
ajax-form-success
This event is fired if a form is submitted successfully.
Basic examples
Here are some simple event binding examples using vanilla JS.
<script>
document.addEventListener('ajax-form-success', function(e) {
console.log('ajax-form-success event - form was valid');
});
document.addEventListener('ajax-form-failure', function(e) {
console.log('ajax-form-failure event - most likely is a validation error');
});
</script>
Using ajax-form-progress
ajax-form-progress
For large file uploads, you can use our ajax-form-progress
event to render a progress bar as the files are uploaded.
Here is a rough example, that will display a blue progress bar that shows the percentage uploaded.
<script>
document.addEventListener('ajax-form-progress', function(event) {
console.log('ajax-form-progress event - updates with completed progrsss as the form processes');
var progressEvent = event.progressEvent;
var percentProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
if (percentProgress < 96) {
event.target.innerHTML = '<div class="sb-progress"><div class="sb-progress-bar" style="width:' + percentProgress + '%">' + percentProgress + '%</div></div>';
}
});
</script>
<style>
.sb-progress,
.sb-progress-bar {
height: 50%;
}
.sb-progress {
width: 100%;
background-color: #ddd;
}
.sb-progress-bar {
width: 0%;
background-color: #1F618D;
color: white;
padding: 20px;
}
</style>
Last updated
Was this helpful?