AJAX form submission using JQuery PHP

AJAX form submission using JQuery PHP

AJAX, in simple layman language, is a technique in which data is asynchronously sent to the server-end from the user-end. By this, we mean that the volume of data or number of data sets are absolutely independent.

AJAX datasets have a very loose coupling, so that every transaction or set of AJAX calls on a single webpage are absolutely exclusive.

This helps in retrieving multiple set of AJAX call datasets at the same time without them intervening with each other.

AJAX form submission – the concept

AJAX form submission is really helpful when you want to make your webpage consume less internet bandwidth. Every page navigation initiates an HTTP call to the server, and then it fetches the whole of the webpage including images, CSS, javascript, etc.

This is really painful in terms of the user. Suppose the user is just submitting a short form and a confirmation is enough for him that the data has been successfully stored. Instead, he gets the whole page reloaded and then gets a statement saying that your form was successfully submitted. This is ridiculous because he has to wait for the whole page to load including its data-heavy elements.

AJAX form submission can bypass this pain and make it helpful for the client end user. The user will fill up the form normally just as in other webpages and submit. Unlike websites where the browser starts navigating and travelling to the action page of the form; our code will simply stop the HTTP redirect and just send the dataset to the backend for storage.

ajax-form-submission-using-jquery-php

This will sharply lower the responds time, because the bandwidth will be saved. The page will remain as it is. Only a part of the webpage will change upon submission to show the confirmation.

Coding required to implement AJAX form submission using JQuery PHP

Our procedure is simple. We will prevent auto submit of the form on click of the submit button. The generalized form submit action will not work. Instead, we will use JQuery POST method and to send the data of the form to the server end.

The form data will be first serialized in JQuery to a string and sent to the backend to PHP. PHP will de-serialize and convert it into individual array elements.

So, first of all, let us create a form in HTML. The following snippet is for a simple form creation. Note here, that the action attribute and the method attribute is supplied with a value. However, we will prevent the form submission with the help of JQuery.

The following is the HTML snippet for the form –

<div id="main">
                <form action="" method="post" id="form">
                    <table>
                        <tr>
                            <td><label>Username</label></td>
                            <td><input type="text" name="username" class="textinput" id="username"/></td>
                            <td><img src="img/pass.png" width="20" height="20"/></td>
                        </tr>
                        <tr>
                            <td><label>Email</label></td>
                            <td><input type="text" name="email" class="textinput" id="email"/></td>
                            <td><img src="img/pass.png" width="20" height="20"/></td>
                        </tr>
                        <tr>
                            <td><label>Name</label></td>
                            <td><input type="text" name="name" class="textinput" id="name"/></td>
                            <td><img src="img/pass.png" width="20" height="20"/></td>
                        </tr>
                        <tr>
                            <td><label>Address</label></td>
                            <td><input type="text" name="address" class="textinput" id="address"/></td>
                            <td><img src="img/pass.png" width="20" height="20"/></td>
                        </tr>
                        <tr>
                            <td colspan="2"><input type="submit" name="submit" class="buttons" id="submit" value="Sign Up"/></td>
                            <td></td>                            
                        </tr>
                    </table>                    
                </form>   
                <div id="confirmation">
                    
                </div>

Once the user has filled in the data in the form and clicked the submit button, our JQuery code shall be triggered. The JQuery code will start the required steps on the “Click” event. First of all, it will prevent the default HTML submission (see the commented lines in the code snippet to identify the exact line of code).

Then, the JQuery will prepare the AJAX call with the help of the POST method. It is not recommended that you create an individual variable for each form field and then extract its value to be sent to the backend. That is a tedious job. Instead, JQuery has the feature to serialize a form’s data.

Serialization means it will compose all the field names and their respective values into a long string. This can be passed on as a single data.

So, we will detect the click event, prevent default submission, serialize the form data, compose the string, and the make an AJAX POST call to the server for the data submission.

Here is the snippet for the above job –

$('#form').submit(function(e){
        e.preventDefault();                // this stops the form default submission
        
        var value = $('#form').serialize();    // contains all field names and data in a string         
        $.post(
              "submit.php",               // the target PHP file
              {value:value},
              function(data){
                  //showing the confirmation message
                  $('#form').slideUp('3500').siblings('#confirmation').html(data).show();    
              }
            );        
    });

Once the data has been sent to the server end through the AJAX form submission procedure, it will be de-serialized by PHP for accessing the values. There we can access the values for further work.

AJAX form submission is very popular among several websites these days. It reduces response time and bandwidth usage. Web developers love the technique. I am sure you guys liked it too! Do let me know in the comments!

Comments are closed.