Caleb/spa-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
A functional web component for progressive enhancement to send form data to a callback function instead of the default HTTP endpoint upon loading
2 Commits 1 Branch 0 Tags 2.9 MiB
HTML 81.6%
JavaScript 18.4%
7eb4d7330c
Go to file
Caleb Braaten 7eb4d7330c Update Element IDs in Demo.html 
Added element IDs for the form labels to be properly associated with input elements.
2020-02-15 11:31:49 -08:00
.gitignore Initial Commit 2020-02-12 07:42:16 -08:00
demo.html Update Element IDs in Demo.html 2020-02-15 11:31:49 -08:00
example.gif Initial Commit 2020-02-12 07:42:16 -08:00
package.json Initial Commit 2020-02-12 07:42:16 -08:00
README.md Initial Commit 2020-02-12 07:42:16 -08:00
spa-form.js Initial Commit 2020-02-12 07:42:16 -08:00

README.md

A Utility web component to send form data to a callback function instead of HTTP endpoint

spa-form

spa-form is a utility component that progressively enhances html forms from a Multi-Page App to a Single-Page App

Example gif

Left Side: The base behavior where the HTML form uses its native behavior of sending the data to an endpoint and getting a response. The animation is showing a new page being loaded.

Right Side: The enhanced behavior where the HTML form instead passes the form data to a defined callback function as an object of key value pairs. The animation is showing the form data being passed to a developer defined callback function that activates the modal.

Installation

npm install spa-form

Usage

Overview

Use as a normal form element and add the attribute is="spa-form"

<form is="spa-form" data-callback="myCallbackFunction" action="/endpoint" >

Include a script tag that defines the component for the browser. If JS is not available then the form will continue working as normal and not be progressively enhanced into an SPA

<script src="./spa-form.js"></script>

API (Attributes)

Attribute Description
Inherited Attributes Everything that the form element has: MDN Docs
data-callback The function name, located in the global scope, that should be called on form submit. It will receive the form fields as a JS Object where the name attributes are the key.
retainOnSubmit Add as an attribute to stop the form from resetting to default values when submitted.

Demo

To try the demo file yourself and explore the API do the following steps.

  1. Clone the Repo
  2. Open the demo.html file in your browser. No web server needed!

Contributing

Feedback and pull requests are welcome! Please open issues so we can discuss any feature ideas or bugs found.

License

MIT