Progressively enhances a form element to submit via XHR.
Install the component using Bower:
$ bower install async-form-element --save
<!-- Include a Web Components polyfill -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/platform.js"></script>
<!-- Include a ES6 Promise polyfill -->
<script src="http://s3.amazonaws.com/es6-promises/promise-1.0.0.min.js"></script>
<script src="async-form-element.js"></script>
Any async form behaves just like a regular form element, except when submitted, it does an XHR request instead.
<form is="async-form" method="post" action="/josh/async-form-element/fork">
<input type="submit" value="Fork">
</form>
form.addEventListener('submit', function(event) {
// event.submission is a promise tracking the form submission progress.
event.submission.then(function() {
console.log('form submitted successfully');
});
});
// Explicit asyncSubmit() invocations return the submission promise
form.asyncSubmit().then(function() {
console.log('form submitted successfully');
});
Latest ✔ | Latest ✔ | 9+* ✔ | Latest ✔ | 6.1+ ✔ |
Multipart Forms with Uploads require IE10+