Question

Well, I need to create a button (HTML, JavaScript, whatever) with two states.

First, when it is clicked, will start a countdown, to force the user to review the form. And then, when the countdown is over, the same button will submit the form.. How can I do that?

This system won’t have any edit ou remove, so the form need to be perfectly filled.
I tried this function in JavaScript:

<script language="JavaScript">
var contador = 10;

alert("Verifique os dados");
function conta() {

document.getElementById("btn").disabled=true;
if(contador==0) {
document.getElementById("btn").disabled=false;
return false;
}

contador = contador-1;
setTimeout("conta()", 1000);

document.getElementById("valor").innerHTML = contador;
}

10

It countdown, but I can’t do the second state with this

Sorry anything, it’s my first try here

Answer 1

http://jsfiddle.net/z2J3B/2/

include the function in your head

function test() {
    var submit = document.getElementById("submit");
    var message = document.getElementById("message");
    if (submit.className == "check") {
        submit.setAttribute("disabled");
        var inc = 10;
        message.innerHTML = "you have " + inc + " seconds left, check the form";
        var interval = setInterval(function () {
            inc--;
            message.innerHTML = "you have " + inc + " seconds left, check the form";
            if (inc <= 0) {
                clearInterval(interval);
                message.innerHTML = "you can now submit the form";
                submit.removeAttribute("class");
                submit.removeAttribute("disabled");
            }
        }, 1000);
        return false;
    }
}