Submit forms via AJAX with ease
Перейти к файлу
Grace Park 110c00e82e
Merge pull request #44 from github/gracepark-update-dockerfile-for-correct-version
Update Dockerfile
2024-10-30 11:32:34 -07:00
.devcontainer Update Dockerfile 2024-10-30 11:03:52 -07:00
.github/workflows Fix publish permissions 2024-10-15 08:04:16 -07:00
examples Remove form-data-entries from demo page 2020-03-16 14:17:16 -04:00
src feat: include submitter info. 2024-05-02 10:47:54 +02:00
test feat: include submitter info. 2024-05-02 10:47:54 +02:00
.eslintrc.json Fix lint violations 2022-06-17 09:23:44 +02:00
.gitignore init 2019-04-16 12:37:32 +01:00
CODEOWNERS Create CODEOWNERS 2020-04-23 17:57:59 +01:00
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md 2019-07-31 13:29:21 +01:00
CONTRIBUTING.md fix LICENSE link 2019-08-05 09:33:26 +01:00
LICENSE fix year in LICENSE 2019-04-16 12:44:12 +01:00
README.md Update README HTML 2019-05-17 10:38:31 -04:00
package-lock.json Run npm audit fix 2024-10-14 19:31:22 +00:00
package.json 0.2.0 2022-06-17 09:27:23 +02:00
tsconfig.json add a tsconfig.json file 2020-04-23 17:51:19 +01:00

README.md

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

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
})
<form action="/signup" method="post" data-remote>
  <label for="username">Username</label>
  <input id="username" type="text">

  <label for="password">Username</label>
  <input id="password" type="password">

  <button type="submit">Log in</button>
  <div class="results"></div>
</form>

Browser support

Browsers without native custom element support require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.