Rahul Tikhe Rahul Tikhe - 6 months ago 32
Ajax Question

Showing hidden div in ajax success function for displaying a remaining registration form

The following is the jquery script for my otp.

<Script>
$(document).ready(function(){
$('#otp_submit').click(function(){
var otp_insert=$('#otp_insert').val();

$.ajax({
url:'smsverify.php',
type:'POST',
data:{otp_insert:otp_insert},
/* beforeSend: function(){
$('.image_loading').show();
},
complete: function(){
$('.image_loading').hide();
},*/
success: function(data){
if(data.success==1){
$('.hide2show').show();
$('html, body').animate({ scrollTop: $('.hide2show').offset().top }, 'slow');

}
else
{
$('.result').html(data);
}

},
error: function() {
console.error('Failed to process ajax !');
}
});
});
});

</Script><!-- Send Otp To the mobile number using ajax -->


This is the script which send data to smsverify.php and now this is my smsverify.php script

<?php

session_start();
$otp_password=$_POST['otp_insert'];
echo $otp_password;


if($_SESSION['otpkey']==$otp_password) {
echo "OTP is granted using session";

} else {
echo "otp is not granted not session";
}

?>


This is php script to validate sms otp which send by user.

actually script works fine , but when it returns the data .it is only showing the echo message. not showing the
.hide2show
class which is contain remaining registration form.

<div class="row">
<h4 class=""> <Strong> &nbsp;&nbsp;&nbsp;Primary Details : </Strong></h4>
<div class="col-md-3">
<label> Your Email - </label>

</div>
<div class="col-md-6">
<input type="text" name="email_user" id="email_user" placeholder="Enter Your Email" class="form-control">
<span id="error" style="display:none;color:red;">Wrong Email Id , Kindly Enter valid E-mail Id</span><i class="fa fa-file-text-o errspan"></i>
</div>

</div><!-- end of emaiol row--><label></label>
<div class="row">
<div class="col-md-3">
<label> Your Mobile Number - </label>
</div>
<div class="col-md-6">
<input type="text" name="mobile_user" id="mobile_user" placeholder="Enter Your Mobile Number ( 10 Numbers Allowed Only)" class="form-control" required title=" Wrong Mobile Number , Only 10 Digits Allowed" onkeypress='return isNumberKey(event)' maxlength="10"><i class="fa fa-lg fa-mobile-phone errspan" ></i> <span id="error_mob" style="display:none;color:red;">Wrong Mobile Number Kindly Enter Valid Number</span>
</div>
<div class="col-md-3">
<input type="button" name="otp_send" id="otp_send" class="btn btn-info btn-block" Value="Send OTP" disabled="disabled">

</div>
</div><!-- end of emaiol row--><label></label>
<img src="../assets/img/289.gif" class="image_loading" style="display:none;">
<div class="row hide4otp" style="display:none;">
<div class="col-md-3">
<label> One Time Password - </label>
</div>
<div class="col-md-6">
<input type="text" name="otp_insert" id="otp_insert" placeholder="Enter One Time Password" class="form-control" maxlength="5" ><span id="error_otp" style="display:none;color:red;">Wrong OTP , Kinldy Enter a Valid OTO Which You Have Received On Your Mobile</span>
</div>
<div class="col-md-3">
<input type="button" name="otp_submit" id="otp_submit" class="btn btn-danger btn-block" Value="Press Me !!" disabled="disabled">
</div>
</div><!-- end of emaiol row--><label></label>
<div class="row hide2show">
<h4 class=""> <Strong> &nbsp;&nbsp;&nbsp;Property Information : </Strong></h4>
<div class="col-md-3">
<strong>Property For : </strong>
</div>
<div class="col-md-6">
<select name="proerty_for" id="proerty_for" class="form-control" >
<option value="Sale"> For Sale</option>
<option value="Rent"> For Rent</option>
</select>
</div>
</div><!-- end of Property_for--><label></label>

This is html code for your relevnce

Answer

Try following code ,it may work for you

<?php

session_start();
$otp_password=$_POST['otp_insert'];

if($_SESSION['otpkey']==$otp_password) {
   echo "1";
} else {
  echo "0";
}

?>

and in your ajax response check with

if(data=='1'){
   // your code
}
Comments