Form Async is an easy-to-use library that provides a brief submission when changing a form. It’s a great solution to prevent data loss when filling out a web form.
Features:
- Lightweight (~1.5kb gzipped)
- Saves any HTML form element
- Support content editable property
- Full customization
- Retry functionality if ajax request fail
- Send form elements as a group of field
- Provide the way to validate changes before sending an ajax request
How to make use of it:
1. Import each jQuery JavaScript library and the jQuery Form Asyncplugin into the HTML doc.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/form-async.min.js"></script>
2. Specify the file to handle the ajax form submit as these:
<input type="text" name="username" class="exemple" data-action="action.php"> <!-- OR --> <form action="ajax.php" class="exemple"> <input type="text" name="username"> </form>
3. Initialize the plugin.
$(".exemple").async();
4. The plugin helps grouped form fields and even HTML5 contentEditable
component.
<!-- input group --> <input type="text" name="username" data-group="username,token"> <input type="hidden" name="token" value="VALUE" data-group="username,token"> <!-- Editable content --> <div contenteditable="true" class="textarea" data-name="content"></div>
5. Callback capabilities.
$("form").async({ before: function(request){ var value = $(this).val(), form = $(this).closest("form"); form.removeClass("error"); if (/[^a-zA-Z0-9]/.test(value)) { form.addClass("error"); request.abort(); } }, success: function(response) { if (response == "success") { $(this).addClass("success"); } }, error: function(request){ var value = $(this).val(), form = $(this).closest("form"); form.removeClass("error"); if (/[^a-zA-Z0-9]/.test(value)) { form.addClass("error"); request.abort(); } } });
Auto Send Data When Form Changes, Form Async plugin/Github
See Demo And Download
Official Website(lognoz): Click Here
This superior jQuery/javascript plugin is developed by lognoz. For extra Advanced Usages, please go to the official website.