CODEWITHSUNDEEP
phpjqueryhtmlmysqlajax
allendks45
allendks45

Reputation: 341

Why is my html/php/ajax returning all rows from my query

I have a webpage that allows user to enter a minGPA in a textbox to query a database and display all records of students that meet that criteria. The html calls a separate php file and also includes ajax calling a function. The problem I'm having is no matter what my query is returning all students. This has plagued me for 2-days now trying to figure where my error is.

Table data:

CREATE DATABASE student_gpa_db;
USE student_gpa_db;

CREATE TABLE student (
    studentID   INT(11)     NOT NULL    AUTO_INCREMENT,
    name        VARCHAR(255)    NOT NULL,
    email       VARCHAR(255)    NOT NULL,
    GPA     DECIMAL(4,2)    NOT NULL,
    PRIMARY KEY(studentID)
);
  INSERT INTO student VALUES
    (1, "John Doe", "[email protected]", 3.56),
    (2, "Jim Smith", "[email protected]", 2.79),
    (3, "Jerry Gold", "[email protected]", 3.78),
    (4, "Jane Doe", "[email protected]", 2.99),
    (5, "Jill Hill", "[email protected]", 2.55);

PHP/HTML:

 <?php
//get user input from text box 
require_once('student_gpa_db.php');
//validate user enters a value

$minGPA = filter_input(INPUT_POST, 'minGPA');
//Code for query
$query = 'SELECT *
          FROM student
      WHERE GPA >= :minGPA
          ORDER BY studentID';

$statement = $db->prepare($query);
$statement->bindValue(':minGPA', $minGPA); 
$statement->execute();
$students = $statement->fetchAll();
?>
<!--table to hold output-->
<table>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Email</th>
<th>GPA</th>
</tr>

<?php foreach ($students as $student) : ?> 
<tr>
    <td><?php echo $student['studentID']; ?></td>
    <td><?php echo $student['name']; ?></td>
    <td><?php echo $student['email']; ?></td>
    <td><?php echo $student['GPA']; ?></td>
</tr>
<?php endforeach; ?>

</table>

    <script type="text/javascript">
    function queryStudent() {
        var ajaxRequest = new XMLHttpRequest;
        ajaxRequest.onreadystatechange = function() {
            if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                document.getElementById("ajax_output").innerHTML = ajaxRequest.responseText;
            }
        };
        ajaxRequest.open("GET", "gpa_search.php", true);
        ajaxRequest.send(null);
    }
    </script>   
    <form action="gpa_search.php" method="post" id="form1">
    <label>Minimum GPA: </label>
    <input type="text" id="GPA" name="minGPA"><br><br>

    <input type="button"  onclick="queryStudent();" value="Search" id="button">
    </form><br>
    <p>Students with higher than minimum GPA will be displayed below.</p><br>

    <!--output section after search-->

    <section id="ajax_output">                       <!--Echo the user input variable with output-->
    <h3>Student list (Students with GPAs higher than <?php echo htmlspecialchars($minGPA); ?></h3>

    </section><br><br>

    <a href="search_split.htm">Search & Split</a>

Upvotes: 0

Views: 91

Answers (1)

Rohit Goyani
Rohit Goyani

Reputation: 1256

You should pass the param with ajax request.

just replace below function with yours and check.

function queryStudent() {
        var ajaxRequest = new XMLHttpRequest;
        ajaxRequest.onreadystatechange = function() {
            if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                document.getElementById("ajax_output").innerHTML = ajaxRequest.responseText;
            }
        };
        params = "minGPA=" + document.getElementById("GPA");
        ajaxRequest.open("POST", "gpa_search.php", true);
        ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajaxRequest.setRequestHeader("Content-length", params.length);
        ajaxRequest.setRequestHeader("Connection", "close");
        ajaxRequest.send(params);
    }

Upvotes: 1

Related Questions