jQuery Plugin For Submitting A Form with Ajax - FormSubmit
File Size: | 10 KB |
---|---|
Views Total: | 2114 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another jQuery plugin which allows you to submit an Html form using Ajax method, with support for callback events, field validation, custom feedback and much more.
See also:
How to use it:
1. Add jQuery library and the jQuery formsubmit's script to your html page.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.formSubmit.js"></script>
2. Add an Ajax loaded and a feedback container to your existing form as follow. The Ajax loader is styled to be hidden by default. It will automatically show when the form is busy.
<form id="demo" action="ajax.php" method="post"> <!-- Form fields here --> <!-- feedback element --> <div class="formSubmit-feedback"></div> <button type="submit" class="button">Submit</button> <!-- Ajax loader --> <img src="loader.gif" class="loader" > </form>
3. Initialize with formSubmit()
method.
$('form').formSubmit({ // options here });
4. Full configurable options and callback functions.
before: function() { // executes code before the form gets serialized and submitted; // Returning false here will prevent the form from being submitted. }, success: function(data) { // executes when the form is submitted and a `success` // status is returned }, error: function(data) { // executes when the form is submitted and an `error` // status is returned }, ajaxError: function(jqXHR, textStatus, errorThrown) { // executes when an XHR error occurs }, showInvalid: function() { // a function that iterates through each erroneous field as // returned in the `invalid` property. Use $(this) // to reference each field. Note that all erroneous fields // will always have the `formSubmit-invalid` class applied to // them by default. // // Example: $(this).addClass('your-custom-class'); }, hideInvalid: function() { // a function that iterates through each erroneous field // before submit to clear them. This should do the opposite // of showInvalid(). Note that the `formSubmit-invalid` class // will automatically be removed by the plugin. // // Example: $(this).removeClass('custom-invalid-class'); } // CSS class for success feedback feedbackSuccessClass: '', // CSS class for error feedback feedbackErrorClass: ''
This awesome jQuery plugin is developed by claviska. For more Advanced Usages, please check the demo page or visit the official website.