GOOCODE - Find your code/scripts

5 WEB development are often used to restrict user operations on the countdown form, such as within a certain period of time you want the user to read the relevant protocol information before allowing the user to continue to the next step, another example in the collection of phone verification code allows the user after a certain time (not received the case under the code) to get a verification code again. Well, today I come to tell you how to use javascript to achieve under this simple application.


Application Scenario 1: user registration information after you've read the agreement before activation button
Some sites require users to agree to the so-called registration information like user agreement, if the agreement is very important, some sites will require new registered user must have read the relevant protocol information in order to activate the Next button to submit the form. In order to allow users to read the complete protocol information (actual user has not really read we do not know), developers will design a countdown such as 30 seconds, 30 seconds later, the form submit button will be activated to take effect, the following look at how to achieve specific.

	<form action="http://www.goocode.net/" method="post" name="agree">
		<input type="submit" class="button" value="Check carefully <Terms of Service and declaration> (30)" id="agree_btn" name="agreeb">
	</form>

Suppose you have a top rest of the form, the form we have omitted, only a submit button, the button is initially unavailable when the 30-second countdown is displayed, the button will display the "I agree" and click Activate.
We use native js to achieve this effect:

var secs = 30;
document.agree.agreeb.disabled=true;
for(var i=1;i<=secs;i++) {
	window.setTimeout("update(" + i + ")", i * 1000);
}
function update(num) {
	if(num == secs) {
		document.agree.agreeb.value =" I Agree ";
		document.agree.agreeb.disabled=false;
	}
	else {
		var printnr = secs-num;
		document.agree.agreeb.value = "Check carefully <Terms of Service and declaration> (" + printnr +")";
	}
}

We set the time to 30 seconds, but you can also set the time you want the button to disable, that is not clickable, then cycle 30 seconds, call update () function, and the current second countdown by contrast window.setTimeout, if the countdown has been completed it will show "I agree", and activate the button.

Application Scenario 2: the user activates the SMS channel to the user's mobile phone text messages to send a verification code for identity
Many sites authenticate users when the need to improve the security of user information, which would bind with the user's mobile phone, so they send a verification code information to mobile phone users, if the user fills in the correct verification code to submit the background, the operation was We will be successful. And send a verification code also may be due to various reasons have sent unsuccessful, not make users stop clicking Send. So developers use the countdown to deal with such problems, after the user activates the message, if you do not receive a verification code text message after 30 seconds you can be allowed to send a message.

	<form action="http://www.goocode.net/" method="post" name="myform">
		<input type="button" class="button" value="Get phone codes"  id="phone_btn" name="phone" onclick="showtime(30)">
	</form>

The above forms on a button to add an onclick event, called showtime () function.

function update_p(num,t) {
	if(num == t) {
		document.myform.phone.value =" Resend ";
		document.myform.phone.disabled=false;
	}
	else {
		printnr = t-num;
		document.myform.phone.value = " (" + printnr +") seconds before resent";
	}
}

Like scene when the button is clicked, the button state is disabled by calling window.setTimeout of update_p () to display the countdown, when the countdown is completed, the button displays "re-send", then the button status is available.