title: Search function on PHP/HTML page using AJAX
body: <p><strong>Description</strong>: Trying to do a title search for videos within a PHP page with AJAX pagination.</p>
  
  <p><strong>Problem</strong>: "Search" button does not do anything when pressed. Instead, if I write something in "keywords" field and switch from page 1 to page 2 the date gets updated and shows videos with matching title. If I delete what I wrote in "keywords" field, and switch again between pages, the data gets updated. As mentioned, "Search" button does not work. </p>
  
  <p><strong>Fix</strong>: I would like to write in the text field and press "Search" button. The page should then update and show only the videos with the matching title.</p>
  
  <p><strong>search.php</strong>:
      
      
      </p>
  
  <pre><code>&lt;!-- Testing the search --&gt;
  &lt;p&gt;&lt;b&gt; Search all videos in database below: &lt;/b&gt;&lt;/p&gt;
  &lt;ul&gt;
      &lt;li&gt;
          &lt;label for="keywords"&gt;Keywords&lt;/label&gt;
          &lt;input type="text" id="keywords" name="keywords" size="50" maxlength="64" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="button" value="Search" onclick="loadData()" /&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>search_videos.js</strong>:
  * 'page' variable is used for pagination</p>
  
  <pre><code>...
  function loadData(page){                   
      $.ajax
      ({
          type: "POST",
          url: "search_videos.php",
          data: { 'page': page, 'keywords': $('#keywords').val() },
          success: function(msg)
          {
              loading_hide();
              $("#container").html(msg);
          }
      });
  }         
  ...
  </code></pre>
  
  <p>Update: Below is what I get, after I press 2nd page and then 1st page again.</p>
  
  <p><img src="https://i.stack.imgur.com/oWa8f.png" alt="enter image description here"></p>
  
  <p>POST results:
  <img src="https://i.stack.imgur.com/tjKzT.png" alt="enter image description here"></p>
  
  <p>Raw results (sorry for bad formatting):</p>
  
  <pre><code>005&lt;div class='data' style='margin-bottom:10px'&gt;&lt;ul&gt;&lt;a href="view.php?id=0"&gt;&lt;img src="images/link_pic.png" alt="error" width="164" height="128"&gt;&lt;/a&gt;&lt;li&gt;Title: &lt;b&gt;Video 1&lt;/b&gt;&lt;/br&gt; Uploaded by: user1&lt;/br&gt;Date added: 13/07/2013&lt;/li&gt;&lt;/br&gt;&lt;/br&gt;&lt;a href="view.php?id=1"&gt;&lt;img src="images/link_pic.png" alt="error" width="164" height="128"&gt;&lt;/a&gt;&lt;li&gt;Title: &lt;b&gt;ghg&lt;/b&gt;&lt;/br&gt; Uploaded by: cacamaca&lt;/br&gt;Date added: 21 Jul 2013 16:03&lt;/li&gt;&lt;/br&gt;&lt;/br&gt;&lt;a href="view.php?id=2"&gt;&lt;img src="images/link_pic.png" alt="error" width="164" height="128"&gt;&lt;/a&gt;&lt;li&gt;Title: &lt;b&gt;s&lt;/b&gt;&lt;/br&gt; Uploaded by: cacamaca&lt;/br&gt;Date added: 21 Jul 2013 16:23&lt;/li&gt;&lt;/br&gt;&lt;/br&gt;&lt;a href="view.php?id=3"&gt;&lt;img src="images/link_pic.png" alt="error" width="164" height="128"&gt;&lt;/a&gt;&lt;li&gt;Title: &lt;b&gt;s&lt;/b&gt;&lt;/br&gt; Uploaded by: cacamaca&lt;/br&gt;Date added: 21 Jul 2013 16:24&lt;/li&gt;&lt;/br&gt;&lt;/br&gt;&lt;a href="view.php?id=4"&gt;&lt;img src="images/link_pic.png" alt="error" width="164" height="128"&gt;&lt;/a&gt;&lt;li&gt;Title: &lt;b&gt;dg&lt;/b&gt;&lt;/br&gt; Uploaded by: gdfgdf&lt;/br&gt;Date added: data azi&lt;/li&gt;&lt;/br&gt;&lt;/br&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class='pagination'&gt;&lt;ul&gt;&lt;li class='inactive'&gt;Previous&lt;/li&gt;&lt;li p='1' style='color:#fff;background-color:#006699;' class='active'&gt;1&lt;/li&gt;&lt;li p='2' class='active'&gt;2&lt;/li&gt;&lt;li p='2' class='active'&gt;Next&lt;/li&gt;
  </code></pre>
  
  <p>This is what I get when I press search button now:</p>
  
  <p><img src="https://i.stack.imgur.com/vq9w5.png" alt="enter image description here"></p>
  
  <p>This is a bit long, the first part of the code should be relevant to the problem. Here is the code for:</p>
  
  <p>search_videos.php :</p>
  
  <pre><code>&lt;?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;
  echo $page;
  echo $start;
  echo $per_page;
  
  // protect against sql injection and ignore multiple spaces in the input
  $keywords = preg_split('#\s+#', mysql_real_escape_string($input));
  
  // query the database by user input title
  $by_title = "LOWER(`V_TITLE`) LIKE '%" . implode("%' OR `V_TITLE` Like '%", $keywords) . "%'";
  
  $query_pag_data = "SELECT * from upload WHERE $by_title LIMIT $start, $per_page";
  $result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
  $msg = "";
  
  while ($row = mysql_fetch_array($result_pag_data)) {
      $msg .= '&lt;a href="view.php?id=' . $row['V_ID'] . '"&gt;&lt;img src="images/link_pic.png" alt="error" width="164" height="128"&gt;&lt;/a&gt;' . '&lt;li&gt;Title: &lt;b&gt;' . $row['V_TITLE'] . '&lt;/b&gt;&lt;/br&gt; Uploaded by: ' . $row['V_USERNAME'] . '&lt;/br&gt;Date added: ' . $row['V_DATE'] . '&lt;/li&gt;&lt;/br&gt;&lt;/br&gt;';
  }
  
   $msg = "&lt;div class='data' style='margin-bottom:10px'&gt;&lt;ul&gt;" . $msg . "&lt;/ul&gt;&lt;/div&gt;"; // Content for Data
  
  /* --------------------------------------------- */
  $query_pag_num = "SELECT COUNT(*) AS count FROM upload";
  $result_pag_num = mysql_query($query_pag_num);
  $row = mysql_fetch_array($result_pag_num);
  $count = $row['count'];
  $no_of_paginations = ceil($count / $per_page);
  
  /* ---------------Calculating the starting and endign values for the   loop----------------------------------- */
  if ($cur_page &gt;= 7) {
    $start_loop = $cur_page - 3;
    if ($no_of_paginations &gt; $cur_page + 3)
        $end_loop = $cur_page + 3;
    else if ($cur_page &lt;= $no_of_paginations &amp;&amp; $cur_page &gt; $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
    } else {
        $end_loop = $no_of_paginations;
    }
  } else {
    $start_loop = 1;
    if ($no_of_paginations &gt; 7)
        $end_loop = 7;
    else
        $end_loop = $no_of_paginations;
  }
  /*     ----------------------------------------------------------------------------------------------------------- */
  $msg .= "&lt;div class='pagination'&gt;&lt;ul&gt;";
  
  // FOR ENABLING THE PREVIOUS BUTTON
  if ($previous_btn &amp;&amp; $cur_page &gt; 1) {
     $pre = $cur_page - 1;
     $msg .= "&lt;li p='$pre' class='active'&gt;Previous&lt;/li&gt;";
  } else if ($previous_btn) {
     $msg .= "&lt;li class='inactive'&gt;Previous&lt;/li&gt;";
  }
  for ($i = $start_loop; $i &lt;= $end_loop; $i++) {
  
     if ($cur_page == $i)
         $msg .= "&lt;li p='$i' style='color:#fff;background-color:#006699;' class='active'&gt;{$i}&lt;/li&gt;";
     else
         $msg .= "&lt;li p='$i' class='active'&gt;{$i}&lt;/li&gt;";
  }
  
   // TO ENABLE THE NEXT BUTTON
  if ($next_btn &amp;&amp; $cur_page &lt; $no_of_paginations) {
     $nex = $cur_page + 1;
     $msg .= "&lt;li p='$nex' class='active'&gt;Next&lt;/li&gt;";
  } else if ($next_btn) {
     $msg .= "&lt;li class='inactive'&gt;Next&lt;/li&gt;";
  }
  
  echo $msg;
  
  // de-allocate memory that was used to store the query results returned by mysql_query(), improve performance
  mysql_free_result($query_pag_data);
  }
  </code></pre>