@itrocks/form-fetch
v0.0.12
Published
AJAX fetch for HTML form submissions using form DOM data
Downloads
505
Maintainers
Readme
form-fetch
AJAX fetch for HTML form submissions using form DOM data.
Installation
npm install form-fetch
Usage
With an HTML page containing a button, a form, and a div with id result, you can fetch your form when clicking the button:
import formFetch from './node_modules/@itrocks/form-fetch/form-fetch.js'
document.querySelector('button').addEventListener('click', async () =>
{
const htmlResponse = await formFetch(document.querySelector('form')).text()
document.getElementById('#result').innerHTML = htmlResponse
})
Alternatively, add a submit event listener to the form to trigger a fetch instead of a standard submission:
import { formFetchOnSubmit } from './node_modules/@itrocks/form-fetch/form-fetch.js'
document.addEventListener('load', () => {
formFetchOnSubmit(document.querySelector('form'), response => {
document.getElementById('#result').innerHTML = htmlResponse
})
})
For a streamlined approach, use xtarget
and build to automate form-fetch
:
import { buildXTarget } from './node_modules/@itrocks/xtarget/xtarget.js'
buildXTarget()
Features
form attributes automatically set fetch() options:
- action => fetch resource
- form data => request body
- enctype => body encoding as FormData or URLSearchParams
- method => request method
You can override these options with custom values for action and RequestInit.
API
FormElement
A type alias for form submitter elements:
type FormElement = HTMLButtonElement | HTMLFormElement | HTMLInputElement
formFetch()
Submits a form using fetch(), based on form DOM data.
response = formFetch(form)
response = formFetch(form, action)
response = formFetch(form, action, init)
Parameters
- form: An HTMLFormElement to submit with fetch().
- action: Optional resource URL. Defaults to form's action attribute.
- init: A RequestInit object for custom request settings.
- returned response: A Promise that resolves to a Response object, as returned by the call to fetch().
Example
document.querySelectorAll('form').forEach(form => {
formFetch(form)
.then(response => response.text())
.then(html => document.getElementById('#result').append(html))
})
formFetchOnSubmit()
Attaches a submit event listener to fetch instead of submit.
formFetchSubmit(element, setResponse)
formFetchSubmit(element, setResponse, init)
Parameters
- element: A FormElement (form, button, or input).
- setResponse:
A callback handling the Response:
setResponse(response, targetSelector, form)
- response: The retrieved Response.
- targetSelector: The selector for the target where the form response should be displayed, determined by the formtarget of the submitter or the target of the form.
- form: The submitted HTMLFormElement.
- init: A callback that returns a RequestInit object containing any custom settings to apply to the request.
formMethod()
Determines the effective method for fetch() submit.
method = formMethod(form)
method = formMethod(form, init)
Parameters
- form: A HTMLFormElement.
- init: An optional RequestInit object. If init.method is set, it is returned.
- returned method:
The return value is the calculated HTTP method, determined by the following priority of non-empty values:
- The value of init.method,
- The
data-method
attribute value of the form, - The value of the form's method attribute.