Reusable AJAX Form

A CodePen Project

It always irked me that there was no native way to use forms with AJAX instead of redirects. It was this thought that inspired me to write a solution that would accomplish exactly that, using as much familiar native syntax as possible. The only extra thing you need to add to your <form>  element is the attribute is="ajax-form" , and bam, you now have an asynchronous non-navigating form! It emits several cancelable events you may listen for, and returns the response data in event.detail .

Tools Used:

  • JavaScript (ES6+)
  • Custom Elements