Skip to content

jQuery Form Plugin ajaxSubmit

ajaxSubmit is a method provided by the jQuery Form Plugin (developed by Malsup) that allows for the asynchronous submission of HTML forms.^[600-developer-frontend-jquery-jquery-validation-file-upload.md]

Usage

The method is typically called on a selected form element.^[600-developer-frontend-jquery-jquery-validation-file-upload.md]

Syntax Example

The following example demonstrates the basic configuration, where a url and data are specified, and a success callback handles the server response^[600-developer-frontend-jquery-jquery-validation-file-upload.md]:

$('#formData').ajaxSubmit({
    url: url,
    data: data,
    success: function (resultObj) {
        // Handle success
    }
});

Integration with Form Validation

The ajaxSubmit function is frequently used within the submitHandler callback of the [[jQuery Validation Plugin]]^[600-developer-frontend-jquery-jquery-validation-file-upload.md]. This ensures that the form is only submitted via AJAX after all client-side validation rules have been successfully passed^[600-developer-frontend-jquery-jquery-validation-file-upload.md].

Workflow Example

In this workflow, fieldSerialize is used to prepare the form data, and ajaxSubmit handles the actual transmission^[600-developer-frontend-jquery-jquery-validation-file-upload.md]:

  1. Validation: The form is validated using the validate method^[600-developer-frontend-jquery-jquery-validation-file-upload.md].
  2. Serialization: If valid, fieldSerialize prepares the input data^[600-developer-frontend-jquery-jquery-validation-file-upload.md].
  3. Submission: ajaxSubmit sends the request^[600-developer-frontend-jquery-jquery-validation-file-upload.md].
$("#formData").validate({
    rules: {
        first: {
            required: true
        }
    },
    submitHandler: function () {
        let url = "";
        let data = $("#formData").fieldSerialize();
        $('#formData').ajaxSubmit({
            url: url,
            data: data,
            success: function (resultObj) {
                // Result handling
            }
        });
        return false;
    }
});

Sources

^[600-developer-frontend-jquery-jquery-validation-file-upload.md]

  • [[jQuery]]
  • [[Ajax]]
  • [[Forms]]
  • [[Serialization]]