Get State District City by PIN Code using AJAX in PHP

Tech Area
Last updated on: January 8, 2026

In this tutorial, We will learn how to get State District City by pin code using Jquery AJAX in PHP. We are using three textbox to show the fetch data by API using AJAX in PHP.

Files used in this tutorial:

1- index.php (AJAX script)

2- get-data.php (fetch details using API)

Below are the step by step process of how to fetch state district city by pin code 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 details on button click by pin code using AJAX.

This screenshot shows the text box of pin code, state, district and city.

index.php

<!DOCTYPE html>  
<head>  
    <title>Search State District City by PIN Code</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">Search State District City by PIN Code</h2>
    <br/>
   <div class="row">
        <div class="col-sm-3">
          <div class="form-group">
            <label for="country">Pincode:</label>
            <input type="text" class="form-control" name="pincode" id="pincode">
            <br>
            <input type="button" class="btn btn-success" value="Search" id="search">
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            <label for="state">State:</label>
          <input type="text" class="form-control" id="state" disabled>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            <label for="state">District:</label>
            <input type="text" class="form-control" id="district" disabled>
        </div>
      </div>
        <div class="col-sm-3">
          <div class="form-group">
            <label for="state">City:</label>
            <input type="text" class="form-control" id="city" disabled>
        </div>
      </div>
    </div>
  </div>
 </body>  
</html>

Now use jquery AJAX script.

<script type="text/javascript">
  $(document).ready(function(){
    $("#search").click(function(){
      var pincode = $("#pincode").val();
      $.ajax({
        url: 'get-data.php',
        method: 'post',
        data: {pin_code: pincode},
        success: function(result)
        {
          if(result=='No')
          {
            alert("Wrong PIN Code Entered!");
            $("#state").val('');
            $("#district").val('');
            $("#city").val('');
          }
          else
          {
          var getresult = $.parseJSON(result);
          $("#state").val(getresult.state);
          $("#district").val(getresult.district);
          $("#city").val(getresult.block);
        }
        }
      });
    });
  });
</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
$pincode = $_POST['pin_code'];
$result = file_get_contents('https://api.postalpincode.in/pincode/'.$pincode);
$result = json_decode($result);
if(isset($result['0']->PostOffice['0']))
{
	$arr_data['state'] = $result['0']->PostOffice['0']->State;
	$arr_data['district'] = $result['0']->PostOffice['0']->District;
	$arr_data['block'] = $result['0']->PostOffice['0']->Block;
	echo json_encode($arr_data);
}
else
{
	echo "No";
}
?>