The problem - do something only once

Let's consider a simple, but common situation. You have developed an e-commerce site: the user can fill their shopping cart, and at the end, they must click on a BILL ME button, so their credit card will be charged. However, the user shouldn't click twice (or more) or they would be billed several times.

The HTML part of your application might have something like this, somewhere:

<button id="billButton" onclick="billTheUser(some, sales, data)">Bill me</button>

And, among the scripts you'd have something similar to this:

function billTheUser(some, sales, data) {
    window.alert("Billing the user...");
    // actually bill the user
}

Assigning the events handler directly in HTML, the way I did it, isn't recommended. Rather, in unobtrusive fashion, you should assign the handler through code. So... Do as I say, not as I do!

This is a very barebones explanation of the problem and your web page, but it's enough for our purposes. Let's now get to think about ways of avoiding repeated clicks on that button... How can we manage to avoid the user clicking more than once?