Html and javascript captcha (not real generation) not working

Question

This is the code :

<html>
<body>
<script>
function generateCaptchaImage(){
var captchaImage=document.getElementById("captchaImage");
var captchaNumber=Math.floor(Math.random()*3+1);
switch(captchaNumber){
case 1:
captchaImage.src="http://www.weebly.com/uploads/2/5/3/9/25398845/791161_orig.jpg";
var captchaCorr=63VD;
break;
case 2:
captchaImage.src="http://www.weebly.com/uploads/2/5/3/9/25398845/4582501_orig.jpg";
var captchaCorr=B8T7;
break;
case 3:
captchaImage.src="http://www.weebly.com/uploads/2/5/3/9/25398845/4758643_orig.jpg";
var captchaCorr=C1BS;
break;
default:
generateCaptchaImage();
break;
}
function verifyCaptcha(captchaInput){
if (captchaInput==captchaCorr){
document.write("Correct!")
}
}
generateCaptchaImage();
</script>
<form onsubmit="verifyCaptcha(this.form.captchaInput.value);return false;">
<img id="captchaImage" src="" />
Insert word in photo : <input type="text" name="captchaInput">
<input type="submit" value="Submit">
</form>

Why is this not working? the part which generates random image may not be working.

How can i solve this? what do i need to do?

Please help.

Answer 1

There are multiple problems here. I've fixed them and made it work. Here's a working version of the above.

<html>
<head>
<script>
var captchaCorr;
function generateCaptchaImage(){
    var captchaImage=document.getElementById("captchaImage");
    var captchaNumber=Math.floor(Math.random()*3+1);

    switch(captchaNumber){
        case 1:
                captchaImage.src="http://www.weebly.com/uploads/2/5/3/9/25398845/791161_orig.jpg";
            captchaCorr="63VD";
            break;
        case 2:
                captchaImage.src="http://www.weebly.com/uploads/2/5/3/9/25398845/4582501_orig.jpg";
            captchaCorr="B8T7";
            break;
        case 3:
                captchaImage.src="http://www.weebly.com/uploads/2/5/3/9/25398845/4758643_orig.jpg";
            captchaCorr="C1BS";
            break;
        default:
            generateCaptchaImage();
            break;
    }
}
function verifyCaptcha(){
    var captchaInput = document.getElementById("captchaInput").value;
    if (captchaInput==captchaCorr){
        alert("Correct!")
    }
    return false;
}

</script>
</head>

<body>
    <form onsubmit="return verifyCaptcha();">
        <img id="captchaImage" src="" />
        Insert word in photo : <input type="text" name="captchaInput" id="captchaInput">
        <input type="submit" value="Submit">
        </form>
</body>
<script>
    generateCaptchaImage();
</script>
</html>

Issues:

Strings on the right of the captchaCorr lines need to be wrapped in quotes
captchaCorr needs to be global (outside of the functions)
generateCaptchaImage() function needs to be called after the HTML has been output

In addition - I don't know your full usecase - but is it worth reinventing the wheel, look into using something like reCaptcha?

Html and javascript captcha (not real generation) not working

Question

1 answers

solution1
3 ACCPTED 2014-03-01 09:50:24

Html and javascript captcha (not real generation) not working

Question

1 answers

solution1 3 ACCPTED 2014-03-01 09:50:24

solution1
3 ACCPTED 2014-03-01 09:50:24