pagination numbers and search button do not stop refreshing simultaneously in laravel 8

I am using the below codes for the pagination without page reload using Ajax, it works fine, but I need the same thing for the search button when I click on it, it refresh the page. I used event.preventDefault() function on the button and it stops refreshing but the result of the search doesn't appears immediately and I need to click on the page number again.

<div align="center">
<button  id='search_btn' type="submit" class="btn" style="background-color:#C9C0BB;"><lable style="background-color:#C0C0C0;font-size: 12px;font-weight: bold;"> گەران</lable></button>
</div>

<div id="pagination_data">
              @include("report.ad_sr",["search_result"=>$search_result], ["p_num"=>$p_num])
            </div>

 <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

  <script>
    $(function() {
      $(document).on("click", "#pagination a,#search_btn,#searchform", function() {
        event.preventDefault();
        //get url and make final url for ajax 
        var url = $(this).attr("href");
        var append = url.indexOf("?") == -1 ? "?" : "&";
       //$("#search_btn").preventDefault();
        var finalURL = url + append + $("#searchform").serialize();
       
     //   $("#search_btn").event.preventDefault();
        //set to current url
        window.history.pushState({}, null, finalURL);

        $.get(finalURL, function(data) {
          
          $("#pagination_data").html(data);
          
        });

        return false;
      })