When developing a web form, either for texting, buying or payment tasks we almost always have to manage a confirmation page that comes after the successful submit of the form data.
If the page we have to manage is being built from scratches we have the opportunity to work on the html/css structure in a sanboxed environment not having to care much about the surroundings, but if we are dealing with a pre-existing form of a dynamic web application that is composed of several templates the faster way to get to the confirm page is to actually fill the form and see where it leads with the correct data.
Each and every update we make to the code will require us to manually refill correctly the form fields.
In an article posted on CSS-tricks Chris Coyier explains a method to avoid this painful routine by using a little bit of JavaScript, an approach that I used myself a couple of months ago to speed up the filling operation of the booking form on venere.com to get on the confirmation page, a task that was especially painful on touch devices, both smartphones and tablets, where the virtual keyboard with autocorrect is not as fast or comfortable as the physical one.
The only difference I adopted was about the name fields, where instead of creating manually a list of legal characters to use with fixed length I preferred to generate them with a randomic method using the toString() function.
Let’s start by creating a randomic series of numbers with the Math.random() function, then we apply to its result the toString() method with a base 36 radix so that the digits corresponding to a latin character will be transformed, the by applying the substring(2) method we’ll remove the first two characters of the output number which are the 0 and the comma.
Some digits will stay as they are, and if your form is meticulous like ours it will probably check that the string does not contain any digit as for now there is no person name featuring them.
We can remove the remaining digits with a regex that intercepts any digits and replaces them with nothing :
function randomLatins() {
var string = Math.random().toString(36).substring(2);
string = string.replace(/[0-9]/g,'');
return string;
};
This examples shows all the required steps :
1
This approach to compile forms is more useful respect to a plugin for several reasons :
- it doesn’t require to be installed, studied and configured, one commit and good to go, moreover there are no plugins for mobile browsers
- it’s more handy than a bookmarklet, that on mobile is not easy to save (on each device) and use
- harmeless, as long as we enclose all the code in a function that is executed only when a specific event is fired, like the click on a dedicated button
- we have full control of the form to handle also particular cases and exceptions
- if the form changes the script can be changed and pushed along, thus allowing everyone in the team to stay up to date without worrying about it
It can seem a little thing, but the benefits of automating such daily, repetitive and boring task will be evident in the short-term as it will remove a burden from our brains, allowing us to invest our time on more attractive and stimulating activities.