Onclick/Ajax on the Generate OTP without reloading? - php

Question

I am having an issue that how to send the number to next page where it handles the mobile number and send a message to the user mobile number. By Using onClick method or by using ajax method can we send the message without reloading the page like below in the code.
index.php
<form method="POST" action="test.php">
<input type="text" class="form-control" name="mobile" placeholder="Mobile" maxlength="10">
<input type="text" class="form-control" name="otp" placeholder="OTP" maxlength="11" style="width: 40%; float: left;">
<input type="submit" id="btnonOtp" value="Generate OTP" class="form-control" style="background-color:#005995;width: 56.5%; float: left; margin: 0 0 0 12px; border-radius: 0;">
</form>
$('#btnonOtp').click(function()
{
$.ajax({
url: test.php,
type:'POST',
data:
{
text: mobile,
value: mobile
},
success: function(msg)
{
alert('OTP Sent');
}
});
});
Test.php
<?php
include 'send.php';
$_SESSION['smsotp'] = sms_OTP();
$num=$_POST['mobile'];
$number = $num;
//$text = 'Hi There, how are you?';
$sms_api_result = sms_Send($number, 'Please do not share the one time password with anyone. Your One Time password is: '.$_SESSION['smsotp'],$debug);
?>
If I run the test.php with mobile number passing directly then the message is delivered, but I need to pass the mobile number dynamically to $num variable.
Can any one help me where I am going wrong??

Answer 1

The 'data' object in your ajax isn't passing the right value.
First, add an id to the mobile tag,
<input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile" maxlength="10">
Second, change the input type of the buttom from type="submit" to type="button". This is required because 'submit' by default does a full page submit, even if you have an click handler defined for it. [the click function also gets executed but after than the page submit happens as well.]
And then update your click function like the one below.
$('#btnonOtp').click(function()
{
$.ajax({
url: test.php,
type:'POST',
data:
{
// The key is 'mobile'. This will be the same key in $_POST[] that holds the mobile number value.
mobile: $('#mobile').val()
},
success: function(msg)
{
alert('OTP Sent');
}
});
});
This should solve your core problem.
Debugging hint: To check if the data is being passed correctly, in test.php you can do a var_dump($_POST). This will print all the key-value pairs that were received. This should help you to analyse what is usually missing.
P.S: Also, as a good practice you might want to add a validation on the Value of the mobile number field to ensure the data entered by the user indeed looks like a mobile number.

Answer 2

Try below code that can help you:
NOTE: Please check if mobile number is getting in $number variable or not.
<?php
include 'send.php';
$_SESSION['smsotp'] = sms_OTP();
$number = (int) $_POST['mobile'];
//$text = 'Hi There, how are you?';
$sms_api_result = sms_Send($number, 'Please do not share the one time password with anyone. Your One Time password is: '.$_SESSION['smsotp'],$debug);
?>

Answer 3

M.AutoInit(),$(document).ready(function(){var e=$(window).height(),t=$(".row.main-background").height();$(document).height();t<e&&$(".row.main-background").css("height","100%"),$("body").css("height",e)});var Email=localStorage.getItem("Email"),Name=localStorage.getItem("Name"),Id=localStorage.getItem("Id"),Cognito_ID=localStorage.getItem("Cognito_ID");Email&&Name&&Id&&""!=Cognito_ID&&(window.location.href="matches.html");var selectedValue,referral,referralValue=[];function myFunction(){var e=localStorage.getItem("Cognito_ID");if(null!=(t=localStorage.getItem(e+".CrickingDuelsUserInfo")))var t=localStorage.getItem(e+".CrickingDuelsUserInfo");else $("#overlayLoader").hide(),$("#verification").modal("open",{onOpenStart:function(){$("main").addClass("filter-blur"),$("footer").addClass("filter-blur")},onCloseStart:function(){$("main").removeClass("filter-blur"),$("footer").removeClass("filter-blur")}}),document.getElementById("accountVerficationStepOne").style.display="block",document.getElementById("accountReferralCode").style.display="none";var n=JSON.parse(t);if(null==n&&(client=new AWS.CognitoSyncManager,client.openOrCreateDataset("CrickingDuelsUserInfo",function(e,t){SyncData(t)})),null!=t){null==n.ReferralTaken&&($("#overlayLoader").hide(),$("#verification").modal("open",{onOpenStart:function(){$("main").addClass("filter-blur"),$("footer").addClass("filter-blur")},onCloseStart:function(){$("main").removeClass("filter-blur"),$("footer").removeClass("filter-blur")}}),document.getElementById("accountVerficationStepOne").style.display="block",document.getElementById("accountReferralCode").style.display="none");var o=n.ReferralTaken.Key,a=n.ReferralTaken.Value;if(null!=n.SelectedState){var c=n.SelectedState.Key;n.SelectedState.Value;"SelectedState"==c&&localStorage.setItem("user_state","restricted")}"ReferralTaken"==o&&"true"==a&&($("#overlayLoader").show(),window.location.href="matches.html",cognitosync("Web","LastLoginOS"))}}function isPhoneKey(e,t){var n=e.which?e.which:event.keyCode;return!(n>31&&(n<48||n>57))&&!($(t).val().length>9)}function isOTPKey(e,t){var n=e.which?e.which:event.keyCode;return!(n>31&&(n<48||n>57))&&!($(t).val().length>0)}function delayedredirect(){window.location.href="matches.html"}function cognitosync(e,t){var n=localStorage.getItem("Cognito_ID",cognito),o=localStorage.getItem("Email",o),a=localStorage.getItem("Id",a),c=localStorage.getItem("Name",c);client=new AWS.CognitoSyncManager,client.openOrCreateDataset("CrickingDuelsUserInfo",function(c,l){SyncData(l),"stateselect"==t?(l.get("SelectedState",function(e,t){}),l.put("SelectedState",e,function(e,t){}),l.get("DeviceId",function(e,t){}),l.put("DeviceId",n,function(e,t){}),l.get("Email",function(e,t){}),l.put("Email",o,function(e,t){}),l.get("PrimaryEmail",function(e,t){}),l.put("PrimaryEmail",o,function(e,t){}),l.get("UserId",function(e,t){}),l.put("UserId",a,function(e,t){}),l.get("IsFavorites",function(e,t){}),l.put("IsFavorites","true",function(e,t){}),l.get("IsLikeFB",function(e,t){}),l.put("IsLikeFB","false",function(e,t){}),l.get("IsLikeTWITTER",function(e,t){}),l.put("IsLikeTWITTER","false",function(e,t){}),l.get("IsMusicOn",function(e,t){}),l.put("IsMusicOn","false",function(e,t){}),l.get("IsPushOn",function(e,t){}),l.put("IsPushOn","false",function(e,t){}),l.get("IsShowRatecard",function(e,t){}),l.put("IsShowRatecard","false",function(e,t){}),l.get("IsShowSocialMedia",function(e,t){}),l.put("IsShowSocialMedia","false",function(e,t){}),l.get("TriviaQuestions",function(e,t){}),l.put("TriviaQuestions","0",function(e,t){}),l.get("Country",function(e,t){}),l.put("Country","India",function(e,t){}),SyncData(l)):"LastLoginOS"==t?(l.get("LastLoginOS",function(e,t){}),l.put("LastLoginOS","Web",function(e,t){}),SyncData(l)):"PhoneNo"==t?(l.get("PhoneNo",function(e,t){}),l.put("PhoneNo",e,function(e,t){}),SyncData(l)):"GotPhoneNo"==t?(l.get("GotPhoneNo",function(e,t){}),l.put("GotPhoneNo","true",function(e,t){}),SyncData(l)):"referaltaken"==t&&(l.get("ReferralTaken",function(e,t){}),l.put("ReferralTaken",e,function(e,t){}),SyncData(l),setTimeout(delayedredirect,2e3))})}window.fbAsyncInit=function(){FB.init({appId:"1437031366566616",xfbml:!0,version:"v2.10"})},function(e,t,n){var o,a=e.getElementsByTagName(t)[0];e.getElementById(n)||((o=e.createElement(t)).id=n,o.
src="https://connect.facebook.net/en_US/sdk.js",a.parentNode.insertBefore(o,a))}(document,"script","facebook-jssdk"),document.getElementById("phonenumber_button").addEventListener("click",function(){var e=$("input[name='phone']").val();localStorage.setItem("phone_number",e);var t=Math.floor(1e3+9e3*Math.random());localStorage.setItem("otp",t);var n=localStorage.getItem("Cognito_ID");$.
ajax({url:'https://ws.cricking.com/ws5/otpsms.php?value={"userid":"'+n+'", "otp":"'+t+'", "tonumber":"'+e+'", "platform":1}',type:"GET",success:function(e){0==(e=JSON.parse(e)).StatusCode&&(document.getElementById("accountVerficationStepOne").style.display="none",document.getElementById("accountVerficationStepTwo").style.display="none",document.getElementById("accountVerficationStepThree").style.display="block")}}),cognitosync(e,"PhoneNo")}),document.getElementById("resend_code").addEventListener("click",function(){var e=localStorage.getItem("phone_number"),t=localStorage.getItem("otp"),n=localStorage.getItem("Cognito_ID");$.
ajax({url:'https://ws.cricking.com/ws5/otpsms.php?value={"userid":"'+n+'", "otp":"'+t+'", "tonumber":"'+e+'", "platform":1}',type:"GET",success:function(e){0==(e=JSON.parse(e)).StatusCode&&(document.getElementById("accountVerficationStepTwo").style.display="none",document.getElementById("accountVerficationStepThree").style.display="block")}})}),document.getElementById("otp_submit").addEventListener("click",function(){var e=$("input[name='otp1']").val()+$("input[name='otp2']").val()+$("input[name='otp3']").val()+$("input[name='otp4']").val(),t=localStorage.getItem("otp"),n=localStorage.getItem("phone_number"),o=localStorage.getItem("Cognito_ID");t==e&&($.ajax({url:'https://ws.cricking.com/ws5/userregistration.php?value={"tonumber":"'+n+'","userid":"'+o+'"}',type:"GET",success:function(e){}}),cognitosync("true","GotPhoneNo"),document.getElementById("accountVerficationStepTwo").style.display="none",document.getElementById("accountVerficationStepThree").style.display="none",document.getElementById("accountVerficationStepOne").style.display="none",document.getElementById("accountReferralCode").style.display="block")}),document.getElementById("loginBtn").addEventListener("click",function(){$("#overlayLoader").show(),FB.login(function(e){if(FB.api("/me",{fields:"email,name"},function(e){localStorage.setItem("Email",e.email),localStorage.setItem("Name",e.name),localStorage.setItem("Id",e.id);localStorage.getItem("Email"),localStorage.getItem("Name"),localStorage.getItem("Id"),localStorage.getItem("Cognito_ID")}),e.authResponse){setTimeout(myFunction,5e3);var t=e.authResponse.accessToken;if(localStorage.setItem("accesstoken",t),null!=t){var n={IdentityPoolId:"us-east-1:8017b399-3a23-45d6-8407-7271cef062ef",Logins:{"graph.facebook.com":t}};AWS.config.region="us-east-1",AWS.config.credentials=new AWS.CognitoIdentityCredentials(n),AWS.config.credentials.get(function(e,t){AWS.config.credentials.get(function(){AWS.config.credentials.identityId;client=new AWS.CognitoSyncManager,client.openOrCreateDataset("CrickingDuelsUserInfo",function(e,t){SyncData(t),t.getAllRecords(function(e,t){var n=t.length;0==t.length&&client.openOrCreateDataset("CrickingDuelsUserInfo",function(e,t){SyncData(t),t.getAllRecords(function(e,t){})});var o=localStorage.getItem("_internal._metadata"),a=JSON.stringify(o);JSON.parse(a);if(t.length>1){for(var c=0;c<n;c++)if("ReferralTaken"==t[c].key){referralValue={userval:t[c].value};break}localStorage.setItem("userVal",referralValue.userval)}})}),cognito=AWS.config.credentials.identityId,localStorage.setItem("Cognito_ID",cognito)})})}}})}),$("#select_state").click(function(){var e=document.getElementById("user_state");e=$("#user_state option:selected").val();if(""==(selectedValue=e))return M.toast({html:"Select a state"}),!1;"Assam"==selectedValue?(cognitosync("true","referaltaken"),cognitosync(selectedValue,"stateselect"),document.getElementById("accountReferralCode").style.display="none",document.getElementById("accountVerficationStepOne").style.display="none"):(cognitosync(selectedValue,"stateselect"),document.getElementById("accountVerficationStepTwo").style.display="block",document.getElementById("accountReferralCode").style.display="none",document.getElementById("accountVerficationStepOne").style.display="none")}),$("#final_refer").click(function(){var e=document.getElementById("refer_code").value,t=localStorage.getItem("Cognito_ID"),n=localStorage.getItem("Email"),o=localStorage.getItem("Name");$.getJSON('https://ws.cricking.com/ws4/?action=playerreferal&value={"UserId":"'+t+'","EmailId":"'+n+'","Code":"'+e+'","UserName":"'+o+'"}').success(function(e){if("0"==e.StatusCode)M.toast({html:"Congrats! Your referral code is valid. Take control! Join Hybrid Fantasy and enjoy Cricking Duels."}),cognitosync("true","referaltaken"),cognitosync("Web","LastLoginOS"),$("#overlayLoader").show();else{if("1"==e.StatusCode)return M.toast({html:"Oops! You entered an invalid referral code. Please check and re-enter the valid referral code."}),!1;if("2"==e.StatusCode)return M.toast({html:"Oops! You entered an invalid referral code. Please check and re-enter the valid referral code."}),!1}})}),$("#skip_refer_code").click(function(){cognitosync("true","referaltaken"),
cognitosync("Web","LastLoginOS"),$("#overlayLoader").show()});
<!DOCTYPE html>
<html>
<head>
<title>CrickingDuels</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.4.14.min.js"></script>
<script src="js\cognito\dist\amazon-cognito.min.js"></script>
<link href="css\materialize.min.css" rel="stylesheet">
<link href="css\fontawesome\css\font-awesome.min.css" rel="stylesheet">
<link href="css\common.css" rel="stylesheet">
<link href="css\login.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Rubik" rel="stylesheet">
<script src="https://use.typekit.net/wmk2lex.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-54357006-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-54357006-1');
</script>
</head>
<body class="white">
<main>
<div class="row main-background">
<div class="">
<div class="col s12 m12 l12 relative" style="padding: 50px 10%;">
<div class="">
<div class="row no-margin">
<div class="col s12 m12 l12">
<h3 class="blue-text text-darken-4 margin-5-0 bold">Let's</h3>
<h3 class="blue-text text-darken-4 margin-5-0 bold">Play</h3>
<h3 class="blue-text text-darken-4 margin-5-0 bold">Fantasy!</h3>
</div>
</div>
<div class="row margin-10-0" style="margin-bottom: 30% !important;">
<div class="col s12 m12 l12">
<p class="font-16 blue-text text-darken-4 margin-5-0 bold">Play fantasy</p>
<p class="font-16 blue-text text-darken-4 margin-5-0 bold">& win cash daily!</p>
</div>
</div>
<div class="row no-margin" style="position: absolute;bottom: 0;left: 0;width: 100%;padding: 0 20px;">
<div class="col s12 m12 l12">
<div class="row add-amount no-margin">
<div class="col s12 m6 l6 no-padding push-l3 push-m3 center-align">
<button id="loginBtn" class="btn btn-flat blue darken-3 white-text width-100" style="text-transform: none;"><i class="fa fa-facebook white-text font-14"></i> Sign in with Facebook</button>
</div>
</div>
</div>
</div>
</div>
<div style="margin-bottom: 0;"></div>
</div>
</div>
</div>
</main>
<div class="modal" id="verification">
<div class="modal-content blue">
<div class="row no-margin" id="accountVerficationStepOne">
<div class="col s12 m12 l12 no-padding center-align">
<div class="img-block">
<img src="images\state_selection.png" class="img responsive-img img-center" width="150">
</div>
<!-- <p class="uppercase blue-text text-darken-4 bold">State Selection</p> -->
<p class="uppercase blue-text text-darken-4">Residents of the states of Assam and Odisha, and where otherwise prohibited by law are not eligible to enter pay leagues, you can play free Leagues</p>
<div class="form-group" style="padding-top: 30px;">
<select class="" name="state" id="user_state">
<option value="">--Select a state--</option>
<option value="Andaman and Nicobar">Andaman and Nicobar</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Delhi">Delhi</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Odisha">Odisha</option>
<option value="Punjab">Punjab</option>
<option value="Puducherry">Puducherry</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="Uttar pradesh">Uttar Pradesh</option>
<option value="West bengal">West bengal</option>
</select>
<button class="btn btn-flat gradient-background white-text margin-10-0" id="select_state">Next</button>
</div>
</div>
</div>
<div class="row no-margin" id="accountVerficationStepTwo" style="display: none;">
<div class="col s12 m12 l12 no-padding center-align">
<div class="img-block">
<img src="images\mobile_number.png" class="img responsive-img img-center" width="150">
</div>
<p class="uppercase blue-text text-darken-4 bold">Mobile Verification</p>
<p class="uppercase blue-text text-darken-4">Please enter your mobile number</p>
<div class="form-group" style="padding-top: 30px;">
<input type="text" name="phone" id="phone" class="browser-default" onkeypress="return isPhoneKey(event, this)" placeholder="+91">
<button class="btn btn-flat gradient-background white-text margin-10-0" id="phonenumber_button">Next</button>
</div>
</div>
</div>
<div class="row no-margin" id="accountVerficationStepThree" style="display: none;">
<div class="col s12 m12 l12 no-padding">
<div class="img-block">
<img src="images\sms_otp.png" class="img responsive-img img-center" width="150">
</div>
<p class="uppercase blue-text text-darken-4 bold center-align">Mobile Verification</p>
<p class="uppercase blue-text text-darken-4 center-align">Please enter the OTP you have received on your registered mobile number</p>
<div class="form-group center-align" style="padding-top: 30px;margin: 0 auto;">
<input type="text" name="otp1" id="otp1" class="browser-default inline center-align" style="width: 16%; padding: 0 5px;" onkeypress="return isOTPKey(event,this)">
<input type="text" name="otp2" id="otp2" class="browser-default inline center-align" style="width: 16%; padding: 0 5px;" onkeypress="return isOTPKey(event,this)">
<input type="text" name="otp3" id="otp3" class="browser-default inline center-align" style="width: 16%; padding: 0 5px;" onkeypress="return isOTPKey(event,this)">
<input type="text" name="otp4" id="otp4" class="browser-default inline center-align" style="width: 16%; padding: 0 5px;" onkeypress="return isOTPKey(event,this)">
</div>
<div class="form-group center-align resend_code">
Resend code
</div>
<div class="form-group center-align">
<button class="btn btn-flat gradient-background white-text margin-10-0" id="otp_submit">Next</button>
</div>
</div>
</div>
<div class="row no-margin" id="accountReferralCode" style="display: none;">
<div class="col s12 m12 l12 no-padding">
<div class="img-block">
<img src="images\sms_otp.png" class="img responsive-img img-center" width="150">
</div>
<p class="uppercase blue-text text-darken-4 bold center-align">Referral code</p>
<p class="uppercase blue-text text-darken-4 center-align">We want to give you a head start. If you have a referral code, enter it below and we will load ₹ 89 in your wallet to join the leagues.</p>
<div class="form-group center-align" style="padding-top: 30px;margin: 0 auto;">
<input type="text" name="refer_code" id="refer_code">
</div>
<div class="form-group center-align resend_code">
Skip
</div>
<div class="form-group center-align">
<button class="btn btn-flat gradient-background white-text margin-10-0" id="final_refer">Submit</button>
</div>
</div>
</div>
</div>
</div>
<div id="overlayLoader" style="display: none;">
<div class="loader">
<div class="progress thin-4">
<div class="indeterminate"></div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js\materialize.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" integrity="sha256-rsPUGdUPBXgalvIj4YKJrrUlmLXbOb6Cp7cdxn1qeUc=" crossorigin="anonymous"></script> -->
<!-- <script src="js/dust-full.min.js"></script>
<script src="js/dust-helpers.min.js"></script> -->
<script src="js\cognitosync.js"></script>
<script src="js\login.js"></script>
<!-- <script type="text/javascript" src="js/javascript.js"></script> -->
</html>