Ajax Simple Captcha on jquery Dialog form

CAPTCHA is a type of challenge-response test used in computing to determine whether or not the user is human. Adding captcha to html/php page is simple task . But its not so easy in jquery dialog form for newbies . So lets implement a simple captcha for jquery dialog form.

I will use 4 files :

1. index.php ( Contains html form, javascript code to send ajax request)

2. captcha.php ( Create captcha image)

3. captcheck.php ( Check weather value entered for captcha is right or wrong)

4. post.php ( Page where form submits if captcha validation is fine)

index.php

<html>
    <head>
        <title>Ajax Captcha</title>
        <script language="JavaScript">
            var url = 'captcheck.php?code=';
            var captchaOK = 2; // 2 - not yet checked, 1 - correct, 0 - failed
            function getHTTPObject() {
                try {
                    req = new XMLHttpRequest();
                    }
                catch (err1) {
                    try {
                        req = new ActiveXObject("Msxml12.XMLHTTP");
                        }
                    catch (err2) {
                        try {
                            req = new ActiveXObject("Microsoft.XMLHTTP");
                            }
                        catch (err3) {
                            req = false;
                            }
                        }
                    }
                return req;
            }
            var http = getHTTPObject(); // We create the HTTP Object
            function handleHttpResponse() {
                if (http.readyState == 4) {
                    captchaOK = http.responseText;
                    if(captchaOK != 1) {
                        alert('The entered code was not correct. Please try again');
                        document.myform.code.value='';
                        document.myform.code.focus();
                        return false;
                        }
                    document.myform.submit();
                    }
                }
            function checkcode(thecode) {
                http.open("GET", url + escape(thecode), true);
                http.onreadystatechange = handleHttpResponse;
                http.send(null);
            }
            function checkform() {
                // First the normal form validation
                if(document.myform.req.value=='') {
                    alert('Please complete the "required" field');
                    document.myform.req.focus();
                    return false;
                }
                if(document.myform.code.value=='') {
                    alert('Please enter the string from the displayed image');
                    document.myform.code.value='';
                    document.myform.code.focus();
                    return false;
                }
                // Now the Ajax CAPTCHA validation
                checkcode(document.myform.code.value);
                return false;
            }
            </script>
            </head>
        <body>
            <form action="post.php" method="post" name="myform">
                <table>
                    <tr><td>Required field:</td> <td><input type="text" name="req" value=""></td></tr>
                    <tr><td>Captcha image:</td> <td><img src="captcha.php" border="0"></td></tr>
                    <tr><td>String:</td> <td><input type="text" name="code" value=""></td></tr>
                    <tr><td></td> <td><input type="submit" value="Submit Form" onclick="return checkform()"></td> </tr>
                </table>
            </form>
        </body>
    </html>

captcha.php

captcheck.php

post.php

Way to C / C++, Php, Jquery, Html, Sql.

Header menu

Saturday, 9 August 2014

Ajax Simple Captcha on jquery Dialog form

Ajax Simple Captcha on jquery Dialog form

No comments:

Post a Comment

Blog Archive

Contact Form

Traffic Rank

ALexa stats