Juozas devBlog

Last week I was working on one task, which required me to check data with AJAX when form is being submitted. Users clicks the button, request is made, data arrives, some hidden fields are modified, actual submit happens. The problem I ran into is, how to control form submission and ensure that it’s submitted only when AJAX has finished it’s job.

What I had, was a form, where user enters username using auto-completion. Problem was, setting user_id hidden field after user selection (from search results) was sometimes faulty. If users enters “Joh”, selects “John”, user_id is set to 2. But if user changes value to “John J”, selection even is not executed and user_id remains 2. This is a problem, because this is not the users meant and on submit I need to check if given username is correct, and in this case set user_id to null.

It’s quite easy to forget what A in AJAX stands for. A means asynchronous, which means that when HTTP calls are made JavaScript doesn’t wait for it to return response. This property made AJAX so useful, but in some cases it’s not what developers want. For example in jQuery, all AJAX functions has possibility to supply it with anonymous function – callback.

$("#Form").submit(function () {
 
	$.get(
		url,
		{},
		function (data)
		{
			// callback with data
		}
	);
 
	return true;
});

Again, this is what most of the times developers need, but I was working on different problem. Problem is, callback function here will never be executed. JavaScript will make a call, go to “return true;” statement, and browser is sent to other page. In my case, I needed form to be submitted only when response data has arrived and some manipulations have been done.

It may seem quite an easy problem, but it turned not to be. The problem is, you need to modify this even function, such that it can be called again when callback function have done it’s work (or modify it, to unbind submit event function and when submit again). First time, function creates HTTP request and returns false (to stop browser from actually submitting it).

After data has completed loading, callback function calls submit event again. However, now function knows that it’s second call (hence, callback has been called) and returns true – browser submits the form. What I came up with, is this code:

$("#Form").submit(function () {
 
	if ($.formLoading != false)
	{
		$.get(
			url,
			{},
			function (data)
			{
				// callback with data
				$.formLoading = false;
				$("#Form").submit();
			}
		);
 
		return false;
	}
	else
	{
		return true;
	}
});

It works perfectly. You can test it here: first form works correctly, second one never finishes loading (have a look at code).

I believe, that AJAX on submit is not the best way to do such things, but required functionality was for administration panel, so there was no risk of users cheating. It was possible to do the same work in server-side when handling submitted data, but for better user experience, I wanted to make data check without refreshes.