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.

    }
});