Over a million developers have joined DZone.

jQuery Ajax Form: Asynchronous Form Submit

DZone's Guide to

jQuery Ajax Form: Asynchronous Form Submit

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.


jQuery Ajax Form provides the facility to submit a form asynchronously. This plugin is really helpful for Asynchronous file uploading. However, in this post, I am showing only the normal field submit. You can find more about the plugin here.

In this Demo, "We will create a form and style them in bootstrap and initialize them with Jquery Ajax form plugin." The directory structure for this demo is as shown below:  

In this demo, we are submitting the form field to the same page (just for demo purposes). You can use the URL property in the Ajax form or provide the URL in the ACTION attribute in the Form DOM element.
We have created a form element with 3 input fields (name, subject, roll) and a submit button. The HTML markup used is below:

<!DOCTYPE html>
    <title>Jquery AjaxForm With Bootstrap Style</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/my-style.css">
    <form id="my-detail-form">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">Ajax Form With Bootstrap</h3>
            <div class="panel-body">
               <div class="alert alert-warning  my-message-error">
                   <a href="#" class="alert-link">...</a>
                <div class="alert alert-success  my-message-success">
                    <a href="#" class="alert-link">...</a>
               <input name='name' type="text" class='form-control' placeholder="Enter Your Name">
               <input name='subject' type="text" class='form-control' placeholder="Enter Your Subject">
               <input name='roll' type="text" class='form-control' placeholder="Enter Your Roll Number">
            <div class="panel-footer">
                <button type="submit" class="btn btn-info">SUBMIT</button>
    <script src="lib/jquery-1.10.1.min.js"></script>
    <script src="lib/jquery.form.min.js"></script>
    <script src="my-form-script.js"></script>
The below script shows the initialization of the Form element with the Ajax form. It has beforeSubmit handler, which does the validation of the required field. If the required field is missing, then it displays the error message at the top. It has a success handler to indicate if the form is submitted successfully and response has arrived.

 * Created by saan on 10/6/13.
    /*ERROR Message Display Element Reference*/
    MY_MESSAGE_ERR : $(".my-message-error"),
    /*SUCCESS Message Display Element Reference*/
    MY_MESSAGE_SUC : $(".my-message-success"),
    /*Shows the input message and hides it in 5 seconds*/
    showMessage:function(msg, type){
        var message = (type === 'ERR')? this.MY_MESSAGE_ERR : this.MY_MESSAGE_SUC,
            txt = $(message).find('a');
     *Handler: success, Once the form is submitted and response
     *arrives, it will be activated.
    successHandler: function(responseText, statusText, xhr, form){
        TS_AJAX_FORM.showMessage("Form Submitted Status("+statusText+").", "SUC");
     *responseText, statusText, xhr, $form: beforeSubmit, for validation   Let, title and roll is your required field.
     *Let's show an error message if these fields are blank.
    beforeSubmitHandler:function(arr, form, options){
        var isValid = true;
        $.each(arr,function(index, aField){
            if('name' === aField.name && aField.value === ""){
                TS_AJAX_FORM.showMessage("Name Can not be Empty.", "ERR");
                isValid = false;
            }else if('roll' === aField.name && aField.value === ""){
                TS_AJAX_FORM.showMessage("Roll Can not be Empty.", "ERR");
                isValid = false;
        return isValid;
    /*Initializing Ajax Form*/
/*My Small Tutorial: Execution point*/
The initial form will look like this upon page load:

The below screenshot shows the error message when we submitted the field without entering the roll input field. This is done using the beforeSubmit handler and returning a false when roll or name is empty:

The below screen shows the success message when the form is submitted and response has arrived. If you set 'clearForm' or 'resetForm' to true, then after successful submission, all the form fields will be cleared.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}