Pavlovian Clicking

Sometime back we built a complex system for one of our clients to be able to import orders in bulk. We built them a great system that would accept CVS files, and then loop through the items and place orders while simultaneously deducting those items from the inventory of their warehouse. We tested it locally hundreds of times, uploaded it to the staging server and tested it some more. Every thing worked as design, great! We let the client know, then pushed it to the live server. Everyone was happy...for a time. About a month later we hear from the client that sometimes, not all the time, but sometimes orders would be placed twice. So we tested again and found that the program was working as designed. However the problem continued.

At around this time I got a retainer ticket for one of our other clients informing us that they were receiving multiple submissions on all of their forms, so we did what any good programmer would do, we set up reports to debug the forms. We gave it about a week to collect data, then checked the logs. Sure enough there were multiple submissions on many of the forms. Here was the interesting part however, it wasn't consistent. Different forms would do it at different times, sometimes it was two duplicate submission, sometimes three, often times only one. What was going on?

If you know about designing interfaces with an eye on human behavior, you may already have an idea of what was going on, I certainly did. To test this out, I re-routed one of the forms to deliver confirmation emails only to my address. I then filled in the form....I then smashed the button as many times as I could before the page refresh. Lo and behold I got 12 emails in my inbox in quick succession.

A little bit of quick Googling revealed that this is a know issue with PHP based systems. You see, the button is captured in the browser (the client side), but the submission is handled in the database (the server side), and if your internet connection is slow, the browser will keep registering clicks on the button till the server returns a response. A quick jQuery snippet of code is all that was needed to hide the button and replace it with a message letting the user know that they had, indeed, clicked the button.

(function($, drupal, document) {
  $(document).ready(function () {
    var submitButton = $('input[@type=submit]'),
        form = $('.webform-client-form');
    submitButton.click(function (e) {
      submitButton.hide();
      form.append(
           $('<input />')
              .attr('type', 'button')
              .attr('disabled', 'true')
              .addClass('secondary button radius form-submit')
              .val(Drupal.t('Processing...'))
       )
    });
  });
})(jQuery, Drupal, window.document);

Back in the early 20th century (you know, in ancient history,) a somewhat sadistic psychologist by the name of Ivan Pavlov subjected his dogs to some testing. What he discovered is that his dogs, and as it turns out us humans, can be trained to do things without realizing it. What does this have to do with the aforementioned button you may ask. Easy, because Microsoft Windows is such a widely used operating system, users have become accustomed to double clicking. It is so common on Windows machines that people don't even realize they are doing it.

As developers we sometimes miss these "behaviors" because we are focused on the code, but since we have a diverse team here we can get multiple people to look at a problem. Sometimes the solution is something really simple, as the case was here, sometimes it is not. In any case it helps to have someone else with a "fresh set of eyes" look at the problem.