website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

PHP Captcha using jQuery AJAX

PHP Captcha using jQuery AJAX

  • 147
  • 12-Apr-2022
  • Details

    index.html
    <html>
        <head>
            <title>Create Captcha using PHP,jQuery and AJAX</title>
            <link rel="stylesheet" type="text/css" href="style.css" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script src="script.js"></script>
        </head>
    
        <body>
            <div id="mainform">
                <div class="innerdiv">
                    <h2>Create Captcha using PHP,jQuery and AJAX</h2>
                    <!-- Required div starts here -->
                    <form method="post" id="myForm">
                        <h3>Fill Your Information!</h3>
                        <br />
                        <table>
                            <tr>
                                <td>Username:</td>
                                <td><input type="text" name="username" id="username1" /></td>
                            </tr>
                            <tr>
                                <td>Email:</td>
                                <td><input type="text" name="email" id="email1" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <br />
                                    <br />
                                    <br />
                                </td>
                                <td id="imgparent">
                                    <div id="imgdiv"><img id="img" src="captcha.php" /></div>
                                    <img id="reload" src="reload.png" />
                                </td>
                            </tr>
                            <tr>
                                <td>Enter Image Text:</td>
                                <td><input id="captcha1" name="captcha" type="text" /></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><input type="button" id="button" value="Submit" /></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </body>
    </html>
    

     

    script.js
    $(document).ready(function ()
    {
        //change CAPTCHA on each click or on refreshing page
        $("#reload").click(function ()
        {
            $("img#img").remove();
            var id = Math.random();
            $('<img id="img" src="captcha.php?id=' + id + '"/>').appendTo("#imgdiv");
            id = '';
        });
        //validation function
        $('#button').click(function ()
        {
            var name = $("#username1").val();
            var email = $("#email1").val();
            var captcha = $("#captcha1").val();
            if (name == '' || email == '' || captcha == '')
            {
                alert("Fill All Fields");
            }
            else
            { //validating CAPTCHA with user input text
                var dataString = 'captcha=' + captcha;
                $.ajax(
                {
                    type: "POST",
                    url: "verify.php",
                    data: dataString,
                    success: function (html)
                    {
                        alert(html);
                    }
                });
            }
        });
    })

     

    verify.php
    <?php
    //CAPTCHA Matching code
    session_start();
    if ($_SESSION["code"] == $_POST["captcha"]) {
        echo "Form Submitted successfully....!";
    } else {
        die("Wrong TEXT Entered");
    }
    ?>

     

    captcha.php
    <?php
    //staring session
    session_start();
    //Initializing PHP variable with string
    $captchanumber = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz';
    
    //Getting first 6 word after shuffle
    $captchanumber = substr(str_shuffle($captchanumber), 0, 6);
    //Initializing session variable with above generated sub-string
    $_SESSION["code"] = $captchanumber;
    
    //Generating CAPTCHA
    $image = imagecreatefromjpeg("bg.jpg");
    $foreground = imagecolorallocate($image, 175, 199, 200); //font color
    imagestring($image, 5, 45, 8, $captchanumber, $foreground);
    header('Content-type: image/png');
    imagepng($image);
    ?>

whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat