0.0.1 • Published 3 years ago
@ampedweb/ajaxform v0.0.1
Ajax Form - Yes, another one.
Simple, ajax form submit. Uses fetch api in modern browsers and falls back to XHR for older browsers.
Requirements
IE 11+
Features
- Fetch API
- XHR Fallback for older browsers
- Works off native form attributes.
- Form expects response in valid JSON format.
Options (Defaults)
new AjaxForm(yourFormElementHere, {
//Any headers that need to be sent with the request.
headers: {
"X-Requested-With": "XMLHttpRequest"
},
//Form credentials
credentials: 'same-origin',
//Stop the usual page refresh after form submit
stopPageRefreshOnSubmit: true,
//Override the form elements action
action: null,
//Override the form elements method
method: null,
//Callbacks if you don't want to use events.
callbackInitializeBefore: () => {
},
callbackInitializeAfter: () => {
},
callbackRefreshBefore: () => {
},
callbackRefreshAfter: () => {
},
callbackDestroyBefore: () => {
},
callbackDestroyAfter: () => {
},
onFormSubmitErrorCallback: (responseJsonData, element) => {
},
onFormSubmitSuccessCallback: (responseJsonData, element) => {
},
beforeFormSubmitCallback: (element) => {
},
afterFormSubmitCallback: (responseJsonData, element) => {
}
}
Events
All events are fired on the form element supplied. Events will contain "responseJsonData" and "formElement". Plugin expects response to be in JSON format
- onFormSubmitSuccess
- onFormSubmitError
- beforeFormSubmit
- afterFormSubmit
Getting Started
const ajaxForm = new AjaxForm(yourFormElementHere, {
//In the contect of Laravel for example it might be useful to send these!
headers: {
"X-CSRF-TOKEN": document.querySelector("meta[name='csrf-token']").getAttribute('content')
},
beforeFormSubmitCallback: (formElement) => {
//Best place to validate the form before it is submitted.
},
/**
*
* @param responseJsonData
* @param HTMLFormElement formElement
*/
onFormSubmitErrorCallback: (responseJsonData, formElement) => {
//Uh Oh! Something went wrong. Maybe display an error?
},
onFormSubmitSuccessCallback: (responseJsonData, formElement) => {
//Whoop Whoop! Your form submitted fine, display a success message here.
}
});
0.0.1
3 years ago