AJAX Form Submit With Custom Feedback - FormJS

AJAX Form Submit With Custom Feedback - FormJS
File Size: 72.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.1.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.