Here I am going to paginate chapter_subscriptions table which has many rows. So I am trying to paginate in such a way that at a time 10 rows will be displayed. My problem is when I click the insert button, the page variable in the jQuery code isn't assigned a value and stays undefined. Then the sql query in chapter_subscription_searchpagination.php fails. I can't figure out where I've made a mistake.
chapter_subscription_search.php
<?php
include('db.php');
$start_date=date("Y-m-d");
?>
<html>
<head>
<title>Chapter Subscriptions</title>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>
</head>
<body>
<header>
<img src="images/ipoint.png" class="logo" /> USER REGISTRATION</header>
<div class="container">
<h1 style="text-align:center">ADDING THE CHAPTER SUBSCRIPTION DETAILS</h1>
<form name="chapter_subscriptions" id="chapter_subscriptions" action="#" method="post">
<?php
$end_date1 = date('Y-m-d', strtotime("+3 months"));
$end_date2 = date('Y-m-d', strtotime("+6 months"));
$end_date3 = date('Y-m-d', strtotime("+9 months"));
?>
<table align='center' border='1'>
<tr>
<td>
<label for="userid">UserId</label>
</td>
<td>
<input id="userid" name="userid" type="text" />
</td>
</tr>
<tr>
<td>
<label for="chapter_no">ChapterNumber</label>
</td>
<td>
<input id="chapter_no" name="chapter_no" type="text"/>
</td>
</tr>
<tr>
<td>
<label for="start_date">StartDate</label>
</td>
<td>
<input id="start_date" name="start_date" type="text"/>
</td>
</tr>
<tr>
<td>
<label for="end_date">EndDate</label>
</td>
<td>
<select name="end_date" id="end_date">
<option value=<?php echo $end_date1; ?>><?php echo $end_date1; ?></option>
<option value=<?php echo $end_date2; ?>><?php echo $end_date2; ?> </option>
<option value=<?php echo $end_date3;?>><?php echo $end_date3;?> </option>
</select>
</td>
</tr>
</table>
<div id="wrap">
<input type="submit" name="insert" id="insert" value="insert">
<input type="submit" name="edit" id="edit" value="edit">
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#insert").click(function(e){
var userid = $("#userid").val();
var chapter_no = $("#chapter_no").val();
var start_date = $("#start_date ").val();
var end_date = $("#end_date").val();
var page = $("#page").val();
alert(page);
});
});
</script>
<div id="display"></div>
</body>
</html>
