In this article we learn how we can add captcha anywhere on HTML page using javascript and enable or disable button.
<div id="divcaptcha"> </div>
<input id='myBtn' type="button" value="Login" />
<script>
document.getElementById("myBtn").disabled = true;
var a, b, c,
submitContent,
captcha,
locked,
validSubmit = false,
timeoutHandle;
function generateCaptcha() {
a = Math.ceil(Math.random() * 10);
b = Math.ceil(Math.random() * 10);
c = a + b;
submitContent = '<span>' + a + '</span> + <span>' + b + '</span>' +
' = <input id="txtanswer" onkeyup="checkCaptchavalue()" type="text" maxlength="2" size="2" required /> <a onclick="refreshcaptcha()" style="cursor:pointer">↺</a> ';
var divcaptcha = document.getElementById("divcaptcha");
divcaptcha.innerHTML=submitContent;
init();
}
function checkCaptcha() {
if (captcha == c) {
document.getElementById("myBtn").disabled = false;
validSubmit = true;
}
else {
if (captcha === '') {
document.getElementById("myBtn").disabled = true;
}
else {
document.getElementById("myBtn").disabled = true;
}
validSubmit = false;
}
return validSubmit;
}
function checkCaptchavalue() {
var addvalue = document.getElementById("txtanswer").value;
captcha = addvalue;
checkCaptcha();
}
function unlock() { locked = false; }
function refreshcaptcha() {
if (!locked) {
locked = true;
setTimeout(unlock, 500);
generateCaptcha();
setTimeout(checkCaptcha, 0);
}
}
function init() {
}
generateCaptcha();
</script>
0 Comments