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';
}
}
?>