Live Search Box Using PHP, MySQL and AJAX

Question

I am trying to make an search box which to display the "Address" from MYSQL/PHP

I have used ajax to refresh page without leaving page, but when I run in browser, it always give me an error. when I used console, the return result of echo $_POST['name'] = ( html code of header.php + "What I need" + html code of footer.php )

<?php

        include 'header.php';
        include 'Connect.php';

        if( isset($_POST['ajax']) && isset($_POST['name']) ){
        echo $_POST['name'];
        exit;
        }
?>

        <form method="POST">
                <label>Username</label>
                <input type="text" name="name" required="required" id='name'>
                <div id='response'></div>
        </form>

  <script>
  $(document).ready(function(){
    $('#name').keyup(function(){
     var name = $('#name').val();

     $.ajax({
      type: 'post',
       url: index.php,
      data: {ajax: 1,name: name},
      success: function(response){
       $('#response').text(response);
      }
     });
    });
  });
  </script>

<?php

    if(isset($_POST['name'])){
    $username = $_POST['name'];
    $stmt = $con->prepare("SELECT Username, FullName, Adresse, Email, Phone FROM dbo.users WHERE Username= ?");
    $stmt->execute(array($username));

        while($row=$stmt->fetch(PDO::FETCH_ASSOC))
                            {
                    $Username = $row["Username"];    
                    $FullName = $row["FullName"];
                    $Adresse = $row["Adresse"];
                    $Email = $row["Email"];
                    $Phone = $row["Phone"];

                    echo "<tr>
                    <div>
                        <td>".$Username."</td>
                        <td>".$FullName."</td>
                        <td>".$sEID."</td>
                        <td>".$Email."</td>
                        <td>".$Phone."</td>
                    </div>
                        </tr>";
                } 
        echo "</table>
        </div>";
} else echo '<div class="alert alert-danger"> This Name <strong>is not exit</strong></div>';

        include $tpl.'footer.php';

    } 

?>

the returne result of $_POST['name'] = ( html code of header.php and Connect.php + "What I need") $_POST['name'] =<!DOCTYPE html> <html> <head> <meta charset="utf-8"> .... </div> </div> </nav> " and what i intred by Ajax" — Aissa Mustapha
You explicitly put include $tpl.'footer.php'; into the part where you handle POST data, and now you wonder that you get the footer content send back …? — CBroe

Francesco G. Francesco G. · Accepted Answer · 2018-02-05T11:24:59

Your question isn't very clear... if i understand correctly... this is broken by design, you're calling the page itself and update #name with the content of the entire page, thats why you see html + "what you need" (the response): the response is the whole page.

The right way to do this would be to move the second part of PHP code (where you perform the query ecc.) on a separate script and then call that new script by putting its name as the url parameter in the ajax call.

Live Search Box Using PHP, MySQL and AJAX

2 Answers