Today, we want to implement a countdown function. For example, if you forget your password, you need to obtain a verification code first, then, if you enter and verify the password within 60 seconds after the countdown, you can change the password. This is the basic method for many websites. So first, you submit a form. The website will send you an email containing the verification code, but this countdown is written in js. Therefore, you cannot refresh the page after submitting the form, otherwise, the countdown function is lost.
I read it online and said that if I want to submit a request without refreshing, there are only two methods: iframe and ajax. I implemented it using iframe.
Actually
<Iframe src = "about: blank" name = "blkframe" id = "blkframe" style = "display: none;"> </iframe>
<Form method = "post" action = "/TaoWei/UserForgetPass" target = "blankFrame" id = "form11">
I will return the response in an undisplayed iframe, so that it will not be refreshed.
Let's look at my countdown function again:
<Script type = "text/javascript">
Var wait = 60;
Function time (o ){
If (wait = 0 ){
Document. getElementById ("validateDiv"). style. display = "none ";
O. removeAttribute ("disabled ");
O. value = "get verification code ";
Wait = 60;
} Else {
O. setAttribute ("disabled", true );
O. value = "resend (" + wait + ")";
Wait --;
SetTimeout (function (){
Time (o)
},
1000)
}
}
Document. getElementById ("btn"). onclick = function () {time (this); document. getElementById ("validateDiv"). style. display = "";
Document. forms [0]. submit ();
}
</Script>
Be careful with the last statement. If it is changed to onsubmit, it will not work. I guess it is blocked.