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

  • 75
  • 12-Apr-2022

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>
                        <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>
    </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);
?>

Download

Atechseva
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat with Me