How to add form to access page number in instant search? - php

Question

I used this script (https://www.webslesson.info/2020/02/instant-search-with-pagination-in-php-mysql-jquery-and-ajax.html) and I would like to add a form to directly access a page number.
I tried this but it doesn't work !
<div class="goto-page">
<form action="" method="POST" onsubmit="return pageValidation()">
<input type="submit" class="goto-button" value="Go to page">
<input type="text"
class="enter-page-no" maxlength="4" size="3"
name="goto" min="1"
required >
</form>
</div>
PHP Code modified
if (isset($_POST['goto'])) {
$start = (($_POST['page'] - 1) * $limit);
$page = $_POST['goto'];
}
else
{
if($_POST['page'] > 1)
{
$start = (($_POST['page'] - 1) * $limit);
$page = $_POST['page'];
}
else
{
$start = 0;
}
}

Answer 1

Consider the following example. This expands on the jQuery already in use in the example you linked to.
$(function() {
function load_data(page, query = '') {
$.ajax({
url: "fetch.php",
method: "POST",
data: {
page: page,
query: query
},
success: function(data) {
$('#dynamic_content').html(data);
}
});
}
load_data(1);
$(document).on('click', '.page-link', function() {
var page = $(this).data('page_number');
var query = $('#search_box').val();
load_data(page, query);
});
$('#search_box').keyup(function() {
var query = $('#search_box').val();
load_data(1, query);
});
$(".goto-page form").submit(function(evt) {
evt.preventDefault();
load_data(parseInt($(".goto-page input[name='goto']").val()));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br />
<div class="container">
<h3 align="center">Live Data Search with Pagination in PHP Mysql using Ajax</h3>
<br />
<div class="card">
<div class="card-header">Dynamic Data</div>
<div class="card-body">
<div class="form-group">
<input type="text" name="search_box" id="search_box" class="form-control" placeholder="Type your search query here" />
</div>
<div class="table-responsive" id="dynamic_content">
</div>
<div class="goto-page">
<form>
<button type="submit">Go To Page</button>
<input type="text" class="enter-page-no" maxlength="4" size="3" name="goto" value="1" required>
</form>
</div>
</div>
</div>
</div>
When Enter is hit or the Button pressed, the form is submitted. The submit callback will gather the value and use load_data() to load that page.