code

IDD

Blog

Okay, so, you've heard of Test Driven Development, where tests (unit, functional, system, integration, and contract) are written first, then the code that passes the tests is written to that test's specifications, as a way to write good, efficient, tested code.

There are also Acceptance test-driven development (ATDD), behavior-driven development (BDD), example-driven development (EDD) and story test-driven development (SDD) styles of code writing. I'm most familiar with the last.

We have (mostly because I wanted) a tech-debt sprint every 4th sprint on my main project at work. These are sprints where we do not introduce new features, but rather fix bugs, improve infrastructure, increase performance, or refactor that write-once-to-learn-copy-once-and-shit-copy-again code into a don't repeat yourself (DRY) bit of code. When feature development is blocked, for whatever reason, we continue developing, but the priority order is often unclear.

Until today.

Prevent multiple form submits with jQuery in webkit/chrome

Blog

Okay, so, you don't want to submit a form twice. While there are server side ways to prevent a form from being accepted twice, it's nice to prevent the need with a little client-side prevention, too. Better user experience, as a bonus.

Using jQuery, you could do this:

  $(".class-on-my-submit-button").click(
    function(e) { 
        $(this).attr('disabled', 'disabled');
    }
    );

The problem with this is that the disabled attribute on the button prevents the form from submitting at all in webkit browsers: Chrome and Safari (ref: http://www.google.com/support/forum/p/Chrome/thread?tid=152f74d4890dc84f&hl=en)

Instead, add a class and check for the class' existence to determine if the form should submit or not.

$(".class-around-each-form form").submit(function(e) {
        if ($(this).hasClass('my-disabled-class')) { e.preventDefault(); return false; }
        $(this).addClass('my-disabled-class');
        return true;
        });

I have a div with a class named .class-around-each-form around each form on a particular page, a quirk specific to my set up. You could use $("form").submit(...) also.

Stupid simple and frustrating if you didn't realize its need, or didn't test on all the browsers.