HTML form POST to AJAX and then POST to PHP page - php

Question

I have a PHP page with a search function and I use AJAX for pagination. When I submit my search input, AJAX should grab the input and pass it to the PHP page which will further query the database. The last bit does not work and I have been struglling to understand why. Could anyone help please. The code I have is below:
PHP/HTML page with form:
<form action="" id="postData" method="post">
<p><b> Search all videos in database below: </b></p>
<ul><center> &nbsp Keywords: </center>
<input type="text" id="input" name="input" size="50" maxlength="64">
</ul>
<ul>
<center><input type="submit" name = "submit" value ="Search"></center>
</ul>
</form>
Javascript with AJAX:
$(document).ready(function(){
function loading_show(){
$('#loading').html("<img src='../images/loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function loadData(page){
loading_show();
$.ajax
({
type: "POST",
url: "search_videos.php",
data: { 'page': page, 'input': $('#postData').serialize()},
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}
});
});
PHP to query and print the results:
<?php
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 5;
$previous_btn = true;
$next_btn = true;
$start = $page * $per_page;
include"core/database/connect.php";
// Get the input of the selected video
$input = $_POST['input'];
//$input = 'video';
echo $input; // CANNOT get input variable from the initial form!
... The mysql query and rest of the code continued ...

Answer 1

HTML:
<div>
<p><b> Search all videos in database below: </b></p>
<ul>
<li>
<label for="keywords">Keywords</label>
<input type="text" id="keywords" name="keywords" size="50" maxlength="64" />
</li>
<li>
<button onClick="loadData()">Search</button>
</li>
</ul>
</div>
<div id="container">
</div>
Javascript:
$(document).ready(function(){
// ...
function loadData()
{
loading_show();
$.ajax
({
type: "POST",
url: "http://yourwebsite.com/search_videos.php",
data: { 'keywords': $('#keywords').val() },
success: function(msg)
{
loading_hide();
$("#container").html(msg);
}
});
}
});
PHP:
echo $_POST['keywords'];