Get PIN Code by Branch Name using AJAX in PHP
- Tech Area
- October 27, 2023
In this tutorial, We will learn how to get pin code by entering post office branch name using Jquery AJAX in PHP. We are using two textbox to get the pin code by API using AJAX in PHP.
Files used in this tutorial:
1- index.php (AJAX script)
2- get-data.php (fetch pin code using API)
Below are the step by step process of how to fetch pin code by branch name using Jquery AJAX.
Step 1: Create index.php
In this step, create a new file index.php. This is the main file used to implement AJAX to get pin code on button click by branch name using AJAX.
This screenshot shows the text box of branch name and pin code.
index.php
<!DOCTYPE html>
<head>
<title>Get PIN Code by Post Office Branch Name</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="text-center">Get PIN Code by Post Office Branch Name</h2>
<br/>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="country">City Name:</label>
<input type="text" class="form-control" name="city" id="city">
<br>
<input type="button" class="btn btn-success" value="Get" id="search">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="state">PIN Code:</label>
<input type="text" class="form-control" id="pincode" disabled>
</div>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</body>
</html>Now use jquery AJAX script.
<script type="text/javascript">
$(document).ready(function(){
$("#search").click(function(){
var cityname = $("#city").val();
$.ajax({
url: 'get-data.php',
method: 'post',
data: {city_name: cityname},
success: function(result)
{
if(result=='No')
{
alert("Branch Name not Found!");
$("#pincode").val('');
}
else
{
var getresult = $.parseJSON(result);
$("#pincode").val(getresult.pincode);
}
}
});
});
});
</script>Step 2: Create new file for fetch data using API
In this step, create a new file get-data.php. This file used to fetch data using API.
get-data.php
<?php
$city = $_POST['city_name'];
$city = str_replace(' ','_',$city);
$result = file_get_contents('https://api.postalpincode.in/postoffice/'.$city);
$result = json_decode($result);
if(isset($result['0']->PostOffice['0']))
{
$arr_data['pincode'] = $result['0']->PostOffice['0']->Pincode;
echo json_encode($arr_data);
}
else
{
echo "No";
}
?>Download Source Code
Join 10,000+ subscriber