Search box value is replaced with page number selected

I am trying to make a search engine using elasticsearch and PHP. I am using AJAX for live data search. It was working fine until I applied pagination. When I applied pagination, my search query was replaced with the page number. i.e. input in the search box was replaced with page number and according documents where retrieved. Here is my code in index.php file:

<div class="container">
   <br />
   <h2 align="center">Search for any course</h2><br />
   <div class="form-group">
    <div class="input-group">
     <span class="input-group-addon">Search</span>
     <input type="text" name="search_text" id="search_text" placeholder="Search here..." class="form-control" />

     <br>
    </div>
   </div>
   <br />
   <div id="result"></div>
  </div>

<script>
$(document).ready(function(){

 load_data();

 function load_data(query)
 {
  $.ajax({
   url:"fetch_nptel.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('#result').html(data);
   }
  });
 }

 $(document).on('click', '.pagination_link', function(){  
    var page = $(this).attr("id"); 
    load_data(page);  
  });

 $('#search_text').keyup(function(){
  var search = $(this).val();
  if(search != "")
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
});
</script>

And here the code in fetch.php:

<?php
session_start();
require_once '../vendor/autoload.php';
use ElasticsearchClientBuilder;
$client = ClientBuilder::create()->setHosts(['127.0.0.1:9200'])->build();

$record_per_page = 10;
$page='';
$output = '';
if(isset($_POST["page"]))  
{  
    $page = $_POST["page"];  
}  
else  
{  
    $page = 1;  
}  
$start_from = ($page - 1)*$record_per_page;  

if(isset($_POST["query"]))
{
 $link='';
 $search = $_POST["query"];
 $query = $client->search([
    'body' => [
      'query' => [
        'bool' => [
          'must' => [
            'multi_match' => [
              'fields' => ['title','University','Professor','description'],
              'query' => $search
            ]
          ]
        ]
      ],

      'from' => 0,
      'size' => 350
    ]
  ]);

 $n = count($query['hits']['hits']);

 $query = $client->search([
    'body' => [
      'query' => [
        'bool' => [
          'must' => [
            'multi_match' => [
              'fields' => ['title','University','Professor','description'],
              'query' => $search
            ]
          ]
        ]
      ],

      'from' => $start_from,
      'size' => $record_per_page
    ]
  ]);

  if($query['hits']['total']>=1){
    $results = $query['hits']['hits'];
  }

}

if(isset($results))
{
 $output .= '
  <div style="margin-bottom: 10px; margin-top: -10px;">Search results for "<b>'.$search.'</b>"</div>
  <div style="margin-bottom: 10px; margin-top: -10px;">Found '.$n.' results</div>
 ';

 /*This foreach loop is just printing output variable, you may ignore this loop*/

 foreach($results as $r)
 {

  if(isset($r["_source"]["link"])){
  $link = $r["_source"]["link"];
  $output .='
    <div class="card card-1">
    <div id="sticky_header" class="title_header">
      <div class="title"><a class="title_link" href="' . $link . '">'.$r["_source"]["title"].'</a></div>
      <div class="link"><a href="' . $link . '">'.$r["_source"]["link"].'</a></div>
      <hr style="margin-top: 10px;">
    </div>
    <div class="description" style="padding-bottom: 10px;">
    <div style="padding-bottom: 5px;"><b>Description:</b></div>
    <div>'.$r["_source"]["description"].'</div>
    </div>
    <hr style="margin-top: -5px;">
    <div class="div_university">
      <div class="professor" style="font-size: 15px; margin-top: -10px;  margin-bottom: 5px;"><b>Guided '.$r["_source"]["Professor"].'</b></div>
      <div class="university" style="font-size: 15px; margin-top: -5px; margin-bottom: 10px;"><b>Offered By: </b><em style="font-size: 15px;">'.$r["_source"]["University"].'</em></div>
    </div>
    </div>
  ';
  }

 }

 $total_pages = ceil($n/$record_per_page);  
 for($i=1; $i<=$total_pages; $i++)  
 {  
      $output .= '<span class="pagination_link" style="cursor:pointer; padding:6px; border:1px solid #ccc;" id="'.$i.'">'.$i.'</span>';  
 }  
$output .= '</div><br /><br />';
 echo $output;
}
else
{
 echo 'No data found';
}
?>

I can see that in my index.php, my query value of load_data() function is replaced with the page number, that is why it is taking page number as input value. So where am I making mistake? I would highly appreciate any help.

Answer

You are calling load_data with the page number in Javascript : load_data(page) You need to add an extra parameter I think to your load_data.

function load_data(query, page = 0)
 {
  $.ajax({
   url:"fetch_nptel.php",
   method:"POST",
   data:{query:query, page: page},
   success:function(data)
   {
    $('#result').html(data);
   }
  });

and in click handler, pass both paremeters

$(document).on('click', '.pagination_link', function(){  
    var page = $(this).attr("id"); 
    var search = $('#search_text')
    load_data(search, page);  
  });

And finally, you should update your PHP code also.