0

I want to make search in my username database but it doesnt recognize keypress function. also, I want to prevent search.php on first load (can't use isset because there is no button) this is my index.php

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<head>
  <title></title>
  <?php  include 'search.php'; ?>

  <script>
    $(document).ready(function() {
      $("#textbox1").keypress(function() {
        $.ajax({
          type: "GET",
          url: "search.php",
          success: function(data) {
            $("#main").html(data);
          }
        });
      });
    });
  </script>

  <form method="POST">
    enter keyword to search<br>
    <input type="text" name="textbox1" id="textbox1">
    <br><br>
    <div id="main"></div>
  </form>
</head>

<body>

This is my search.php. the connection.php is working proper. so I'm not pasting it here

<?php

    include 'connection.php';

    $search_value = $_POST['textbox1'];
    $query = "SELECT username FROM users WHERE username LIKE '" . $search_value . "%'";
    $conn_status = mysqli_query($conn, $query);

    while($row = $conn_status->fetch_assoc())
    {
        echo $row['username'] . '<br>';
    }
?>
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
M Johnson
  • 15
  • 6
  • Please only ask **one** question per question. If you have multiple questions, ask multiple questions. – MechMK1 Dec 06 '17 at 22:32
  • [Have you watched the AJAX request / response in the browser's developer tools? Have you included the jQuery library in the project? Are there any errors reported? Are you running this on a web-server?](http://jayblanchard.net/basics_of_jquery_ajax.html) – Jay Blanchard Dec 06 '17 at 22:32
  • How do you know keypress isn't working? You aren't sending anything to your PHP so you're not gathering what was pressed. Have you checked with any of the other keyboard events? – Jay Blanchard Dec 06 '17 at 22:33
  • [Little Bobby](http://bobby-tables.com/) says ***[your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php)*** Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php). Even [escaping the string](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) is not safe! – Jay Blanchard Dec 06 '17 at 22:34
  • @DavidStockinger but the questions are related to eachother – M Johnson Dec 06 '17 at 22:35
  • You likely want .`keyup()` because `.keypress()` will not give you the value you expect. It will always be one letter behind. – Jay Blanchard Dec 06 '17 at 22:39
  • If you don't find a successful solution tag me in comments and i can send you some commented code with how to do this as ive done it multiple times before. – Ahm23 Dec 06 '17 at 23:04
  • you've been given answers, one of them asked you if it works now and the other you said nothing, yet you talk to somebody else, what gives here? – Funk Forty Niner Dec 07 '17 at 00:42
  • why don't you tell him that then? you never answered the guy. – Funk Forty Niner Dec 07 '17 at 00:47
  • [This folks, is a comment](https://meta.stackoverflow.com/questions/358600/lets-send-new-users-off-to-see-the-wizard#comment526922_358600) in a [meta post](https://meta.stackoverflow.com/q/358600/1415724) that was created for posts just like this. Feel free to upvote that if you agree. – Funk Forty Niner Dec 07 '17 at 01:38

2 Answers2

2

You should send the field value to your PHP page as data in your ajax request like :

$.ajax({
    type: "GET",
    url: "search.php",
    data: {textbox1: $(this).val()},
    success: function (data) {
          $("#main").html(data);
    }
});

NOTE : I suggest the use of input event in this case since it's more efficient when tracking the user input :

$("#textbox1").on('input', function(){
    //Your logic here
});
halfer
  • 19,824
  • 17
  • 99
  • 186
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
  • how do I prevent include file to load on first opening – M Johnson Dec 06 '17 at 22:39
  • What you mean by _first opening_ ? – Zakaria Acharki Dec 06 '17 at 22:40
  • @ZakariaAcharki *"It works now ?"* - That's what I'd like to know also. I've asked the OP what was going on, but they seem dead set on not letting us all know (well, to the exception somewhat of me, under their question) why it doesn't seem to satisfy them. Lord as my witness; I tried. The question was also too broad to begin with. – Funk Forty Niner Dec 07 '17 at 01:02
0

This snippet is a working one with amendments since you have wrong HTML as well as forgetting to send data to the server.

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <form method="POST">
    enter keyword to search<br>
    <input type="text" name="textbox1" id="textbox1">
    <br><br>
    <div id="main"></div>
  </form>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {

      $("#textbox1").on('input',function() {

        var searchText = $(this).val();
        console.log("Calling PHP with value:" + searchText);

        $.ajax({
          type: "GET",
          data: "textbox1=" + searchText,
          url: "search.php",
          success: function(data) {
            $("#main").html(data);
          },
          error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.responseText);
          }
        });
      });
    });
  </script>
</body>

</html>
Yolo
  • 1,569
  • 1
  • 11
  • 16