how to make captcha in javascript
  • Hello Everyone i am showing you have to generate captcha using javascript

    <html>
    <head>
    <title>Captcha Validation</title>

    <STYLE>
    // CSS is use for just formatting
    .input_img 
    {
     background-image: url("captcha.png"); 
    text-align: center;
     border: medium none;
      font-weight: bold;
      font-family: Modern;
      height: 80px;
     width: 150px;
     font-size: 14px;
    }

    .align
    {
    margin: 0 auto;
    width: 250px;
     
    }

    </STYLE>
        <script type="text/javascript">  
        function DrawCaptcha()
        {
            var a = Math.ceil(Math.random() * 10)+ '';
            var b = Math.ceil(Math.random() * 10)+ '';       
            var c = Math.ceil(Math.random() * 10)+ '';  
            var d = Math.ceil(Math.random() * 10)+ '';  
            var e = Math.ceil(Math.random() * 10)+ '';  
            var f = Math.ceil(Math.random() * 10)+ '';  
            var g = Math.ceil(Math.random() * 10)+ '';  
            var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
            document.getElementById("txtCaptcha").value = code
        }
        function ValidCaptcha(){
            var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
            var str2 = removeSpaces(document.getElementById('txtInput').value);
            if (str1 == str2) return true;        
            return false;
      }

        function removeSpaces(string)
        {
            return string.split(' ').join('');
        }
      </script>
        
        
        
    </head>
    <body onload="DrawCaptcha();">
    <div class="align">
            Welcome To Captcha<br />
          <input id="txtCaptcha" type="text" readonly="" class="input_img">
          <input type="button" id="btnrefresh" value="Refresh" onclick="DrawCaptcha();" /><br>
     <input type="text" id="txtInput"/>    
     <input id="Button1" type="button" value="Check" onclick="alert(ValidCaptcha());"/>
          </div>
    </body>
    </html>

    The result will shows something like this

    image
    CutPicture.com_2013-May-04_07_04_35.jpg
    238 x 136 - 16K
    hussainroyal
  • 3 Comments sorted by
  • Hello Hussain
    Thanks for sharing this article. this helped me in creating a captcha for my University project.

    Thanks again

  • why the style won't work or show.

    thanks
  • because here is one image using with name of captcha.png so kindly keep any background image for captcha hope it will work.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, or you want to Ask a new Question, Please Login or Create a new Account by Clicking below

Login with Facebook

Popular Posts of the Week

Optimum Creative