Twitter Bootstrap Question posted in

Import a variable from one page to another in PHP – Twitter bootstrap

im making an autocomplete search box that lists different courses, and basically what im trying to do is use a search button next to it to display the results of the selected course on another page using an SQL database. The page looks something like this: index.php

So whatever choice you pick from the autocomplete, I then want the “Search Courses” button to link to another page and immediately display the results of that selected course in the search box from the page before. These results will be pulled from an SQL database.

Im basically having trouble linking everything up and can’t figure it out.

This is my search box and button:

<div class="row">
    <div class="ui-widget col-md-4 col-md-offset-4">
    <label for="tags">Search: </label>
    <input id="tags" type="search">
    <input type="submit" value="Search Courses">
    </div>
</div>

Do I need to set some sort of variable to pass on to the next page?

Appreciate any help, thanks.

This is my autocomplete.php file:

<?php
$mysqli = new mysqli("localhost", "scott", "tiger", "courses");
$term = mysqli_real_escape_string($mysqli,$_REQUEST['term']);
$query = "
SELECT title
  FROM course
 WHERE title LIKE '$term%'
 ORDER BY title";
$return = array();
$result = $mysqli->query($query);
while ($row = $result->fetch_array()){
    array_push($return,$row[0]);
}
echo json_encode($return);
?>

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Edinburgh Napier University</title>
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
    <img id="napierlogo" src="logo.jpg"/>
    </div>
  </div>    

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tags" ).autocomplete({
    source: "autocomplete.php",
    autoFocus:true
});
});
</script>

<script>
  $(function() {
    $( "#menu" ).menu();
  });
  </script>
  <style>
  .ui-menu { width: 150px; }
  </style>

  <script>
  $(function() {
    $( "input[type=submit]" )
      .button()
      .click(function( event ) {
        event.preventDefault();
      });
  });
  </script>

  <?php
    isset($_GET['res'])?$var=mysql_escape_string($_GET['res']):$res='';
  ?>

</head>
<body>

<p></p>    

<div class="row">
    <div class="ui-widget col-md-4 col-md-offset-4">
    <label for="tags">Search: </label>
    <input id="tags" type="search">
    <input type="submit" value="Search Courses">
    </div>
</div>

<p></p>

<ul id="menu">
  <li><a href="http://socwebtech1.napier.ac.uk/~40171342/course/index.php">Search</li>
  <li><a href="http://my.napier.ac.uk/Pages/Home.aspx">myNapier</a></li>
  <li>Contact Us
    <ul>
      <li><a href="https://www.facebook.com/EdinburghNapierUniversity/">Facebook</li>
      <li><a href="https://twitter.com/EdinburghNapier?  ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">Twitter</li>
      <li><a href="https://uk.linkedin.com/edu/edinburgh-napier-university-12617">LinkedIn</li>
    </ul>
  </li>  
</ul>

</body>
</html>
Tags:

2

Answers


  1. 0

    First, if it’s not already, your index page needs to be a .php file instead of .html.

    Second, you need to modify your search box to be a form that submits when you click the search button. This will send a POST request to the results.php page that can then load the results from the database using the search term that was entered in the textbox.

    Your textbox html code should become:

    <div class="row">
    <form action="results.php" method="post">
    <div class="ui-widget col-md-4 col-md-offset-4">
        <label for="tags">Search: </label>
        <input id="tags" type="search" name="search">
        <!-- Added the 'name' attribute ^ here
             we'll need this later in the PHP file -->
        <input type="submit" value="Search Courses">
    </div>
    </form>
</div>

    And results.php should have some PHP code at the top similar to this:

    <?php

$searchTerm = $_POST["search"];
// Key part    ->     ^    ^
// this needs to match the name of the search box in html

// TODO -- Sanitize this input (NEVER trust user input)
// using mysqli_real_escape_string() or similar.
// Then use it to perform your search

// Just for testing:
echo $searchTerm;

    More information on $_POST is available here: http://php.net/manual/en/reserved.variables.post.php

    As a side note, you should really be using PDO for database access. It has a load of great features, including “prepared statements” which help prevent against SQL Injections. That, and it’s best practise and it’s good for future maintainability.

    More info here: http://code.tutsplus.com/tutorials/why-you-should-be-using-phps-pdo-for-database-access–net-12059

    Login or Signup to reply.
  2. 0

    When using the JQuery autocomplete with AJAX, the source request is a GET. Try changing your variable to $_GET['term'] and giving you input box a name="term". And then change your function to something like this. 

    $(document).on("ready",function() {         
  $( "#tags" ).autocomplete({
   source: "autocomplete.php",
   autoFocus:true
  });
});

    edit: You are also missing closing tags on some of the links. I would suggest tidying up your HTML code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search