Unable to verify otp using PHP , ajax and javascript

See more:

Javascript

PHP

Ajax

Hi Everyone,
I have created signup form in which there are Signup.php.In signup.php file there are two javascript functions: email_send_OTP( )and email_verify_OTP( ).Inside both of these functions I have used AJAX. The email_send_OTP()function calls sendOTP.php file while email_verify_OTP() function calls verifyOTP.php file .The sendOTP.php file generates the 4 digits OTP while verifyOTP.php file verify whether OTP entered by user is same as that of generated 4-digit OTP or not. Both of these files sendOTP.php and verifyOTP.php work fine as checked by Postman and console.log() function.

The problem is inside javascript function named email_verify_OTP() where the statements in if block are not executed and the else block is executed giving output Error: Please enter valid OTP even if right OTP is entered ..

What I have tried:

I have tried the following codes:

<div class="form-group" style="margin-top: 22px;margin-bottom: 2px;">
                        <div class="input-group-prepend">
                            

                            class="fa fa-envelope">
                            <input style="margin-bottom: -3px; width:45%;"  
                                    type="email" 
                                    name="txtEmail" 
                                    id="txtEmail" 
                                     
                                    placeholder="Enter Your Email ID" 
                                    required/>
                            <button type="button" 
                                    class="email_send_OTP" 
                                     
                                    onclick="email_send_OTP()">Send OTP</button>
                            


                            <input style=" width:45%;"  
                                    type="email" 
                                     
                                    id="email_OTP" 
                                    class="email_verify_OTP" 
                                    placeholder="Enter OTP"/>

                            <button type="button" 
                                    
                                    class="email_verify_OTP" 
                                    onclick="email_verify_OTP()">Verify OTP</button>
                            
                            <span id="email_OTP_result" 
                                style="margin-top: 10px;color: red;">
                            </span>
                            

                        </div>
                        <center ><small style="font-size: 11.5px;color: red;"><span id="email_error"></span> </small></center>

                    
                    </div>

<script>
function email_send_OTP()
{
    jQuery('#email_error').html('');
    var email=jQuery('#txtEmail').val();
    if(email=='')
    {
        jQuery('#email_error').html('Please enter email id.');
    }
    else
    {
        jQuery.ajax
        ({
            url:'sendOTP.php', 
            type:'post',
            data:'email='+email+'&type=email',
            success:function(echoed_string_returned_from_sendOTP_dot_php_file)
            {
               console.log(echoed_string_returned_from_sendOTP_dot_php_file);
                if(echoed_string_returned_from_sendOTP_dot_php_file =='otp_sent')
                {
                    jQuery('#txtEmail').attr('disabled',true);
                    jQuery('.email_verify_OTP').show();
                    jQuery('.email_send_OTP').hide();
                    
                    jQuery('#email_error').html('Email containing OTP has been sent to your email Id.');
                }
                else
                {
                    jQuery('#email_error').html('Error: Email Not Sent.Please try after sometime.');
                }  
            }
        });   
    }
}

function email_verify_OTP()
{
    jQuery('#email_error').html('');
    var email_OTP=jQuery('#email_OTP').val();
    if(email_OTP=='')
    {
        jQuery('#email_error').html('Please enter OTP sent to your email id.');
    }
    else
    {
        jQuery.ajax
        ({
            url:'verifyOTP.php',
            type:'post',
            data:'otp='+email_OTP+'&type=email',
            success:function(echoed_string_returned_from_verifyOTP_dot_php_file)
            {
                console.log(echoed_string_returned_from_verifyOTP_dot_php_file);
                if(echoed_string_returned_from_verifyOTP_dot_php_file == 'otp_verified')
                {
                    jQuery('.email_verify_OTP').hide();
                    jQuery('#email_OTP_result').html('Email Id verified successfully.');

                }
                else
                {
                    jQuery('#email_error').html('Error: Please enter valid OTP.');
                }  
            }
        });
        
    }
     
}

</script>

sendOTP.php

<?php
    session_start();
    
    require_once 'DB/DBConnect.php';
    $db=new DBConnect();
    $pdoObj=$db->connectToDB();

    $type=$_POST['type'];

    if($type=='email')
    {
        $email=$_POST['email'];
        $otp=rand(1111,9999);
        $_SESSION['Email_OTP']=$otp;
        $html="OTP is: $otp";

        $to_email = $email;
        $subject = "Email Verification OTP";
        $body = "Dear USER <br><br>
        Thanks you for joining with us!
        The OTP for verifying your email id is: $otp
        <br><br><br><br><hr>Team Oodemy.com";
        
        $headers = "From:xyz@example.com \r\n";  
        $headers .= "MIME-Version: 1.0 \r\n";  
        $headers .= "Content-type: text/html;charset=UTF-8 \r\n";  
        $headers .= "From: sender email";

        $isEmailSent=  mail($to_email, $subject, $body, $headers);

        if($isEmailSent==true)
        {
            echo 'otp_sent';
        }
        else
        {
            echo 'otp_not_sent';
        }
    }
?>

verifyOTP.php

<?php

    session_start();
    
    require_once 'DB/DBConnect.php';
    $db=new DBConnect();
    $pdoObj=$db->connectToDB();

    $type=$_POST['type'];
    $otp_entered_by_user=$_POST['otp'];
    $otp_from_session=$_SESSION['Email_OTP'];

    if($type == 'email')
    {
        if($otp_entered_by_user == $otp_from_session)
        {
            echo 'otp_verified';
        }
        else
        {
            echo 'otp_not_verified';
        }
    }
?>