Working with AJAX and forms

By | March 30, 2007

Recently I’ve been involved with rebuilding a login and registration section on a website. As it currently is both are separate pages that will be loaded when you hit the links. What the bosses liked to see is that the user is not taken away from the content when they have to log in.

The only way to do that is in an AJAX popup. This would then show the registration / login box. Not to fancy you would say, well so did I originally. But the real problem began when forms where on the page loading the login popup. Because I have to reload after submitting the login I lost all information in the form.

The reason for the refresh is adding user specific content. But loosing the information of the form was not the point.

The quick hack
To solve this I had to do some dirty hacking. (Really dirty :)) When I perform the login I get back the url where I am supposed to go to. If this is on the same project instead of redirecting I will start building a new form to the url. In this form I copy all elements of the existing form. After this is all done its as simple as calling the javascript form.submit(). Et voila!

In pseudo code it looks something like:

doAjaxLogin();
checkRedirectUrl();
buildRedirectForm();

The beauty of this way is that the user doesn’t even get a warning that they are submitting a form. Which is kinda strange to me, but hay if it works!

One thought on “Working with AJAX and forms

  1. Pingback: Using Ajax in your website | Narnio

Leave a Reply