Freecharge Paytm style mobile number auto operator loading

Freecharge Paytm style mobile number auto operator loading using PHP, jQuery and MySQL:

Are you designing online recharge website like freecharge/paytm. ? or similar functionality website? If yes then what we are going to see today is very mandatory one need to be implemented to your website.

Loading operator information automatically based on the given input prepaid mobile number make the user to feel very friendly and helpful because he do not want to keep the operator information also in memory.

 

 

 

MySQL Database – Opr Table Structure & Sample Values:

If you download zip file using the above download link, then you can get the opr.sql file, which you can directly import it into your xampp phpmyadmin.

If you do not have an idea on how to import sql file into xampp phpmyadmin, then mail to mirthbees@gmail.com to help you instantly.

 

Opr Table Structure:

 

 

Opr Table Sample values:

opr_id value in the below table is linked with the properties.ini file. We are not auto populating the state_id in this tutorial, if you want to auto populate state field also then use one more properties.ini.

 

dbConfig.php:

 

[php]

<?php
$dbhost = ‘localhost’;
$dbuser = ‘DBUSERNAME’;
$dbpass = ‘DBPASSWORD’;
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
die(‘Database Connection Failed : ‘ . mysql_error());
}
mysql_select_db(‘DATABASE_NAME’);
?>

[/php]

 

 

BootStrap Responsive Form:

[html]

<div class=”container”>

<!– Main component for a primary marketing message or call to action –>
<div class=”jumbotron”>
<h3>Freecharge Paytm style mobile number auto operator loading Demo | Javadomain.in</h3>
<br/>
<br/>
<form class=”form-horizontal” role=”form” name=”PrepaidForm”>
<div class=”row”>
<div class=”col-sm-6 col-lg-4″>
<div class=”form-group”>
<label for=”prepMobileNum” class=”col-md-4 control-label”>Mobile Number:</label>
<div class=”col-md-8″>
<input type=”text” class=”form-control” id=”prepMobileNum” placeholder=”Mobile Number” onkeypress=”return isNumber(event)” onblur=”validno(); getOprAjax(this.value); validateMobileNum();” maxlength=”10″>
</div>
</div>
<div class=”msg”><div id=”disp”></div><span id=”rv” style=”color:#F00″></span></div>
</div>

<div class=”col-sm-6 col-lg-4″>
<div class=”form-group”>

<label for=”inputPassword” class=”col-md-4 control-label”>Operator:</label>
<div class=”col-md-8″>
<span id=”oid”>
<select class=”form-control” name=”operator” id=”operator”>
<option value=”” selected=”selected”>–</option>
<option value=”AL|AIRCEL”>AIRCEL</option>
<option value=”AT|AIRTEL”>AIRTEL</option>
<option value=”BS|BSNL”>BSNL</option>
<option value=”BSS|BSNL SPECIAL”>BSNL SPECIAL</option>
<option value=”ID|IDEA”>IDEA</option>
<option value=”MS|MTS”>MTS</option>
<option value=”MTD|MTNL DL TOPUP”>MTNL DL TOPUP</option>
<option value=”MTDS|MTNL DL SPECIAL”>MTNL DL SPECIAL</option>
<option value=”MTM|MTNL MUMBAI”>MTNL MUMBAI</option>
<option value=”RL|RELIANCE CDMA”>RELIANCE CDMA</option>
<option value=”RG|RELIANCE GSM”>RELIANCE GSM</option>
<option value=”TD|TATA DOCOMO GSM”>TATA DOCOMO GSM</option>
<option value=”TDS|TATA DOCOMO GSM SPECIAL”>TATA DOCOMO GSM SPECIAL</option>
<option value=”TI|TATA DOCOMO CDMA”>TATA DOCOMO CDMA/INDICOM</option>
<option value=”UN|UNINOR”>UNINOR</option>
<option value=”UNS|UNINOR SPECIAL”>UNINOR SPECIAL</option>
<option value=”VF|VODAFONE”>VODAFONE</option>
<option value=”VD|VIDEOCON”>VIDEOCON</option>
<option value=”VDS|VIDEOCON SPECIAL”>VIDEOCON SPECIAL</option>
<option value=”MTMS|MTNL MUMBAI Special”>MTNL MUMBAI Special</option>
<option value=”TW|TATA WALKY”>TATA WALKY</option>
<option value=”LM|LOOP MOBILE”>LOOP MOBILE</option>
</select>
</span>
</div>
</div>
</div>

<div class=”col-sm-6 col-lg-4″>
<div class=”form-group”>
<div class=”col-md-8″>
<input type=”button” class=”btn btn-info form-control” value=”Proceed” onclick=”displayNumOpr();”/>
</div>
</div>
</div>

</div><!– /.row this actually does not appear to be needed with the form-horizontal –>
</form>
</div>
</div> <!– /container –>

[/html]

 

Javascript Functions we used and its purpose:

 

validno() – Mobile number validation [returns error message if the number starts with 0-6]

isNumber() – to restrict users to enter only numbers.

getOprAjax() – to fetch the operator information from MySQL using Ajax Call.

validateMobileNum() – Mobile number should start with 7 or 8 or 9.

displayNumOpr() – to display the entered number and fetched operator.

 

 

Javascript Source code:

 

[html]

<script type=”text/javascript”>

// function to display the entered number and auto loaded operator
function displayNumOpr() {
var eOpr = document.getElementById(“operator”);
oprSelected = eOpr.options[eOpr.selectedIndex].value;
alert(“Number is : “+document.getElementById(‘prepMobileNum’).value+”\nOperator Selected is : “+oprSelected.split(“|”)[1]);
}

// isNumber function
function isNumber(evt)
{
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
{
return false;
}
return true;
}
//checking whether a number or not
function validno()
{
var a = document.getElementById(“prepMobileNum”).value;
if (a[0]==’0′ || a[0]==’1′ || a[0]==’2′ || a[0]==’3′ || a[0]==’4′ || a[0]==’5′ || a[0]==’6′)
{
document.getElementById(“rv”).innerHTML=”Please Enter a Valid Mobile no”;
}
else
{
document.getElementById(“rv”).innerHTML=””;
}
}
// function to check whether the entered number is valid or not
function validateMobileNum()
{
var x = document.getElementById(‘prepMobileNum’).value;
if (x.charAt(0)!=”9″ && x.charAt(0)!=”8″ && x.charAt(0)!=”7″)
{
document.getElementById(‘prepMobileNum’).value=”;
return false;
}
return true;
}
// function to fetch the operator info from database with the given input mobile number
function getOprAjax(str)
{
if (str!=”” && str.length==10 && str[0]!=’0′ && str[0]!=’1′ && str[0]!=’2′ && str[0]!=’3′ && str[0]!=’4′ && str[0]!=’5′ && str[0]!=’6′)
{
var reqDigit = str.substr(0,4);
$.ajax( {
type: “POST”,
url: “Opr.php”,
data: “input=”+reqDigit+”&src=pre”,
success:function(html) {
$(‘.plan-tile’).show();
$(‘div#div_radio_dyn’).remove();
if ((html==”12″) || (html==”3″)) {
$(‘span#oid’).append(“<div id=’div_radio_dyn’ class=’div_radio_dyn’><input type=’radio’ value=’0′ name=’dyn_radio’ /> Special (2G/3G, Booster packs) &nbsp;&nbsp;<input type=’radio’ value=’1′ name=’dyn_radio’ checked/> Topup</div>”);
document.PrepaidForm.operator.selectedIndex = html;
} else {
document.PrepaidForm.operator.selectedIndex = html;
$(‘div#div_radio_dyn’).remove();
}
}
});
}
}
</script>

[/html]

 

Fetching Operator information from MySQL: [Opr.php]

[php]

<?php
include_once ‘dbConfig.php’;
$ini_array = parse_ini_file(“properties.ini”);

$num = $_POST[‘input’];
$src = $_POST[‘src’];
//$num = ‘9003’;
$autoOpr = getOperator($num);
if (isset($autoOpr) && !empty($autoOpr)) {
if ($src==”pre”) {
echo $ini_array[$autoOpr];
}
}

function getOperator($num) {
$num = mysql_real_escape_string ( $num );
$oprFetchQry = mysql_query ( “select opr from `opr` where num=’$num'” );
$oprQryRow = mysql_num_rows ( $oprFetchQry );
if ($oprQryRow == 1) {
$opr = mysql_fetch_array ( $oprFetchQry );
return $opr [‘opr’];
} else {
return false;
}
}
?>

[/php]

 

properties.ini:

Values are based on the option position in the select menu above.

[plain]

Docomo GSM=12
Airtel=2
Aircel=1
Loop Mobile=22
Reliance GSM=11
Idea=5
Videocon=18
BSNL=3
Vodafone=17
Uninor=15
Reliance CDMA=10
MTS=6
Docomo CDMA=14
MTNL Mumbai=9

[/plain]

 

If Idea = 5 then,

[html highlight=”7″]
<pre><select class=”form-control” name=”operator” id=”operator”>
<option value=”” selected=”selected”>–</option>
<option value=”AL|AIRCEL”>AIRCEL</option>
<option value=”AT|AIRTEL”>AIRTEL</option>
<option value=”BS|BSNL”>BSNL</option>
<option value=”BSS|BSNL SPECIAL”>BSNL SPECIAL</option>
<option value=”ID|IDEA”>IDEA</option>
<option value=”MS|MTS”>MTS</option>
</select></pre>
[/html]

 

When the getOprAjax() method called in the index.html page on tab out of prepaid mobile number input text field, it calls the Opr.php inside it’s ajax call.

In Opr.php we are retrieving the operator information from database by giving first four digit of prepaid mobile number.  [Eg: 9943,8012,9698,9176,9003,9840 etc.,]

Database returns the operator name like Vodafone, Airtel, Aircel etc., which is mapped using the properties.ini value to retrieve the position value in the select menu. This value will be set in the ajax call success function to select the operator.

[html]

document.PrepaidForm.operator.selectedIndex = html;

[/html]

here,

PrepaidForm is the name of the form,

operator is the id of the select menu

 

As per the business for Tata docomo and BSNL, we wanted to render radio buttons to make the user to select top up or special recharge.

[html]

if ((html==”12″) || (html==”3″)) {
$(‘span#oid’).append(“<div id=’div_radio_dyn’ class=’div_radio_dyn’><input type=’radio’ value=’0′ name=’dyn_radio’ /> Special (2G/3G, Booster packs) &nbsp;&nbsp;<input type=’radio’ value=’1′ name=’dyn_radio’ checked/> Topup</div>”);
document.PrepaidForm.operator.selectedIndex = html;
}

[/html]

 

12,3 in the above if loop is based on the properties.ini mapped value for tata docomo and bsnl respectively.

 

 

Output:

 

 

 

Readymade Online Recharge Script :

 

 

jQuery Recommended Books:

PHP Recommended Books:

Feel free to post your comments/thoughts/feedbacks/suggestions in the below comment section….