https://github.com/github/remote-form

Submit forms via AJAX with ease
https://github.com/github/remote-form

ajax decorator form microlibrary

Last synced: about 1 month ago
JSON representation

Submit forms via AJAX with ease

• Host: GitHub
• URL: https://github.com/github/remote-form
• Owner: github
• License: mit
• Created: 2019-04-16T11:36:11.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-09-16T20:15:39.000Z (about 2 months ago)
• Last Synced: 2024-09-30T00:05:30.244Z (about 1 month ago)
• Topics: ajax, decorator, form, microlibrary
• Language: TypeScript
• Homepage:
• Size: 533 KB
• Stars: 56
• Watchers: 4
• Forks: 19
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

README

        
# remote-form

A function that will enable submitting forms over AJAX.

The function will make a request based on the form using `window.fetch` with the payload encoded as URL parameters if the form method is a `GET` and `FormData` for all the other methods.

The request object is available in the callback function, allowing the headers and body to be modified before the request is sent.

## Installation

```

$ npm install --save @github/remote-form

```

## Usage

```js

import {remoteForm} from '@github/remote-form'

// Make all forms that have the `data-remote` attribute a remote form.

remoteForm('form[data-remote]', async function(form, wants, request) {

  // Before we start the request

  form.classList.remove('has-error')

  form.classList.add('is-loading')

  let response

  try {

    response = await wants.html()

  } catch (error) {

    // If the request errored, we'll set the error state and return.

    form.classList.remove('is-loading')

    form.classList.add('has-error')

    return

  }

  // If the request succeeded we can do something with the results.

  form.classList.remove('is-loading')

  form.querySelector('.results').innerHTML = response.html

})

```

```html

  Username

  

  Username

  

  Log in

  


```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome

- Firefox

- Safari

- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1

[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```

npm install

npm test

```

## License

Distributed under the MIT license. See LICENSE for details.