Brian Cray ··· Home > Blog > Javascript > Web form usability: Better form submission feedback with jQuery

Web form usability: Better form submission feedback with jQuery

Browsers fail to give users effective feedback when the user submits a form. Users respond by clicking the submit button over and over. The problem compounds when users find out they've been charged 5 times or when you receive 5 contact submissions. Bummer.

The solution is to replace the submit button with a friendly message letting the user know the form is working. See below…

Sweet! How did we do that? jQuery makes it super simple.

$(function () {
    $('form').submit(function () {
        $('input[type="submit"]', this).replaceWith('<strong>Sending...</strong>');
    });
});

If you don't use jQuery already, grab a copy of jQuery and shame yourself for not using it sooner.

Update: People have been commenting that this could be just as easy without jQuery. While this is true, I figured it was better to show how to do it with jQuery because many people are interested in jQuery, and this code snippet gives them an extra idea how jQuery works.