AJAX Form Submit With Custom Feedback - FormJS

FormJS is a jQuery plugin that allows the user to submit an HTML form using jQuery AJAX without refreshing the current page.

It also sends customizable feedback (info, warning, error or success) to your user after form submitting depending on the response from the server-side.

How to use it:

1. Include a theme CSS on the head section of the HTML page. Available themes:

• theme-bs: Bootstrap theme
• theme-cust: Custom theme
• theme-flat: Flat theme

<link rel="stylesheet" href="/dist/css/theme-bs/formJS-bs.css" />
<link rel="stylesheet" href="/dist/css/theme-cust/formJS-cust.css" />
<link rel="stylesheet" href="/dist/css/theme-flat/formJS-flat.css" />

2. Include the formJS.min.js script after jQuery:

<script src="/path/to/jquery.js"></script>
<script src="/dist/formJS.js"></script>

3. Initialize the plugin on your HTML form and done.

$('#myForm').formJS();

4. Note that the response must look like these:

// feedback
{
  "type": "info",
  "url": "url here",
  "data": {
     "title": "info title",
     "message": "I love FormJS"
  }
}

// view
{
  "type": "success",
  "url": "url here",
  "view": "A HTML response"
}

5. Customize the alert messages.

$('#myForm').formJS({
  alerts: {
    unexpected: {
      title: 'Error',
      message: 'Unexpected error occurred'
    },
    failSend: {
      title: 'Error',
      message: 'Unable to send data'
    }
  }
});

6. Customize the CSS suffixes appended to the parent container.

$('#myForm').formJS({
  keys: {
    success: 'success',
    info: 'info',
    warning: 'warning',
    error: 'error'
  }
});

7. Customize the icons.

$('#myForm').formJS({
  icons:       {
    loading: '<span>&#8987;</span>',
    success: '<span>&#10003;</span>',
    info:    '<span>&#128712;</span>',
    warning: '<span>&#65111;</span>',
    error:   '<span>&#10799;</span>'
  }
});

8. Customize the AJAX form.

$('#myForm').formJS({
  form: {
    ajaxSettings: {
      contentType: false
    },
    alertContainer: '.formJS',
    btnSubmit: '.btn[type="submit"]',
    enableWriteAlert: true
  }
});

9. Sometimes you might need to redirect the page after form submitting.

$('#myForm').formJS({
  redirection: {
    message: 'Automatic redirection in a second',
    delay: 1100
  }
});

10. Execute a callback function after form submitting.

$('#myForm').formJS({
  callback: function ( currentAlert ) {
    // Do something
  }
});

11. Event handlers.

$('#myForm').formJS()
.on( 'formjs:submit', function ( e, ajaxSettings, ajaxPendingt ) {
  // Do something
});
.on( 'formjs:ajax-success', function ( e, feedback ) {
  // Do something
});
.on( 'formjs:error', function ( e, place, message, data ) {
  // Do something
});
.on( 'formjs:write-alert', function ( e, currentAlert ) {
  // Do something
});

Changelog:

v2.3.1 (2019-12-01)

• Fixed: Fail to build scss files from other package

v2.3.0 (2019-10-20)

• Fixed: Unable to send again when error was thrown
• Fixed: Fail to parse feedback data if it's already an object

v2.2.0 (2019-09-26)

• Feature: Feedback can be a HTML

---

This awesome jQuery plugin is developed by JAGFx. For more Advanced Usages, please check the demo page or visit the official website.