[Acronymous] An Easy-to-Use Library that Provides Submission on Form Change | Form Async

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