Ajax Submit: Submitting Forms Asynchronously

Ajax is fast becoming one of the most popular ways to work with a user’s browser and the server. You can submit Ajax forms to a server without requiring the user to refresh the browser web page. While this seems like an insignificant part of web development, it’s an extremely powerful way to work with web applications and create a faster environment for your users.

Learn how to work with Ajax as a beginner

Overview of Ajax

Ajax is a group of libraries that provide asynchronous communication with a web server. When you communicate asynchronously, you can allow several processes to run at the same time without waiting for the first one to finish. With Ajax, the main advantage for developers is allowing a page to submit information while the user still reads the web page. In a normal form, the user must first enter information, then submit the form, and wait for a response from your server. With Ajax, you can submit the form in the background while the user continues to read the page.

A good example of this functionality is when you have dynamic drop-down controls. For instance, if you want the user to choose a car manufacturer and then the manufacturer model, you don’t want the user to wait for the web page to reload while you dynamically fill the drop-down control after choosing a manufacturer. Your other option is filling the drop-down control and filtering with JavaScript, but that’s tedious and doesn’t mean your drop-down will work with all browsers. The other option is Ajax.

Work with Ajax at an enterprise level and create fast applications

With Ajax and a dynamically filled drop-down, your user chooses an option from the first drop-down box. The change triggers an Ajax form submission, which then returns the list of matching options for the secondary drop-down control. You submit the data to your server and the page never refreshes. Your user sees the change in the secondary drop-down control without waiting for a page refresh, which makes your pages more user friendly.

Using Ajax with Your Web Page Forms

You first need a form before submitting data.  There are several other ways to use Ajax, but form submission is one of the most common reasons for using Ajax. You need a form. The following is a simple HTML form that asks the user to type a first and last name:

<form id="myform" action="process.php" method="post">
<table>
<tr>
<td>First Name:</td>
<td><input name="fname" type="text"></input></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input name="lname" type="text"></input></td>
</tr>
<tr>
<td> <input type=”submit” value=”submit” /> </td>
</tr>
</table>
</form>

Now you need to make your Ajax code. Ajax is made with a group of JavaScript libraries, so Ajax is placed in the HTML script tag. The following code is an example of a simple Ajax call that submits the above form:

<script>
$('#myform).submit( function(e) {
success:function(data){
alert(‘ Your form was submitted ‘);
}});
<
/script>

Notice first the “myform” text after the hash tag. This is how you assign a specific HTML tag to an Ajax function.  Your HTML tag needs an id property for this type of call. You can place an id on any HTML tag and use this ID in your Ajax forms.

Notice the “e” in the function. This the event value passed to the function, and you can use it to manipulate data. You can also stop controls such as buttons from performing the default action. For instance, using the e.preventDefault() function, you can stop a button from creating a post back to the server. A post back sends the server information and causes the page to reload.

New to development? Learn how to work with Ajax, jQuery and JSON

You can also submit the values manually in Ajax. This means that you control the data sent back to the server.  The following is another example of an Ajax form submission:

$.ajax({
url: "process.php",
type: "post",
data: ‘myvalue’: formvalue,
success: function(){
alert("success");
}
});

The above form submission calls a processing file named “process.php.” The “type” indicates to the server that you are “posting” data to the server. This is unique from a “get” request, which places the values in a query string and is usually considered the less preferred way to perform a form submission. In this example, you specify the “formvalue” as the value you want to submit instead of the whole form. If the form is successfully, an alert displays. Typically, you’d respond to a successful request by displaying a message in an HTML div. You give the div an ID and call that div from your Ajax function. You can post a small message or perform more advanced functionality such as filling a drop-down control with a set of values.

Ajax uses the XMLHttpRequest object to return data. Even though this object is associated with XML, you can still use this same object to work with JSON in Ajax. JSON and XML perform the same function but the format is different.

You can place one or several Ajax functions in your web pages.  You can also use Ajax with JavaScript, because Ajax uses a list of JavaScript libraries. This basically means you can create any kind of client side code with your web pages that use Ajax to work with server responses. Ajax code is typically faster and provides a better user experience. The only issue and concern is that it works with your users’ browser. As long as your users work with the top browsers, you are probably safe to use Ajax on your forms.