When the user registers, usually needs the short message authentication code, moreover for the interaction effect, also needs to increase the countdown.
The effect is as follows:
<div class= "User-form" >
<form action= "{{path (' Zm_member_register ')}" method= "POST" >
<div class= "Form-list" >
<label class= "Register-label" > Mobile phone number </label>
<input class= "Regphone input-register" type= "text" name= "phone" placeholder= "Please enter your mobile phone number"/>
</div>
<div class= "Form-list" >
<label class= "Register-label" > Verification Code </label>
<input class= "Input-short" type= "text" name= "Sms_salt" placeholder= "Please send SMS Verification code"/>
<input class= "Input-code" id= "btn" type= "button" value= "Send authentication Code"/>
</div>
<input style= "margin-top:60px" type= "Submit" class= "Registersubmit form-sumbit" value= "submitted"/>
</form>
</div>
The verification code here is the value of the mobile phone number and type (type=1 is registered), and the background receive value succeeds to return the success status value by sending it to the backend URL ({{path (' Zm_member_get_salt ')}).
based here, the implementation of the verification code countdown, that can be after the success of the judgement. Call the encapsulated Countdown function time (), noting that the validation code should use input with type button, you can easily change its value to show the countdown.
<script type= "Text/javascript"
//Countdown 60 sec
Var wait=60;
function Time (o) {
if (wait = 0 {
O.removeattribute ("Disabled");
o.value= "Get dynamic Code";
wait = n.
< br>} else {
O.setattribute ("disabled", true);
o.value= "Resend (" + Wait + ")";
&NBSP
wait--;
settimeout (function () {
Time (O)
}, 1000)
}
}
$ ('. Input-code '). Click (function () {
var phone = $ ('. Regphone '). Val ();
$.ajax ({ br> type: ' Post ',
URL: ' {{path (' Zm_member_get_salt ')}} ',
Data: {
Phone:phone,
Type:1
},
Dataty PE: ' JSON ',
success:function (result) {
if (Result.flag = = 1) {
//alert (' success ');
time (BTN);
} else { alert (result.content);
}
}
});
});
</script>