-1

this should be simple but I have lost my way simple form on HTML page - select Men, Women or Junior then send that that value to a php page to perform SQL query and find all the Men, Women or Juniors using the variable "$trigen" display the results on the HTML page using AJAX

if I set $trigen manually it works, but not when I choose the option in the form as set out in this code:--

my HTML:-

<!DOCTYPE html>
<html>

<div class="entry-content">
        

<form action="/getcustomer.php" method="POST">
  <label for="trigen">Choose a gender:</label>
  <select id="trigen" name="trigen">
    <option value="Men">Men</option>
    <option value="Women">Women</option>
    <option value="Junior">Junior</option>
  </select>


<button class="btn btn-primary text-center btn-block btn-flat" style="h2; margin: 20px; color:black;  " name="trilookup" type="submit" onclick="showResults()"> Search</button>

 
</form>

   </div>
   
<div id="results">Results go here if it works....</div>


<script>



function showResults(str) {
  
  var xhttp;
  if (str == "") {
    document.getElementById("results").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("results").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.php?q="+str, true);
  xhttp.send();
}
</script>

then my php code in "getcustomer.php"

<?php  


    //connect to the database
    
  $conn=mysqli_connect('localhost','wetsuder_user1','user123','wetsuder_finder');
  if($conn){
      
  }
  else{
     echo  "Sorry there is a connection error".mysqli_connect_error();
  }

                 
$trigen=$_POST['trigen'];
    
 
 //this is the search
 
$sql = "SELECT id, Gender, Wetsuit FROM wp_wetsuitdata WHERE Gender = '$trigen'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    
  echo "<table><tr><th>ID</th><th>Name</th></tr>";
  
  
  // output data of each row
  
  while($row = $result->fetch_assoc()) {
    echo "<tr><td>".$row["id"]."</td><td>".$row["Gender"]." ".$row["Wetsuit"]."</td></tr>";
  }
  echo "</table>";
} else {
  echo "0 results";
}
$conn->close();
?>
lostinspace
  • 7
  • 2
  • I don't see big error, do you test to add mysqli->error to check if there is a sql error. Try to print your variable also. Think to add a check with is set function to be sure variable is not empty – DonKnacki May 23 '21 at 17:26
  • **Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) – Dharman May 23 '21 at 18:25

1 Answers1

2

Your button is causing a form submission. Just add preventDefault() as the first line of your showResults function and it will prevent the form from submitting naturally. You're handling the form submission via ajax. Also you don't need to have an action or method on your <form tag for the same reason. Another way of preventing the form from submitting is like this: <form onsubmit="return false"

Also, change your function to find the value you want to send, since you're not actually passing that value through the function call str

function showResults() {
  preventDefault(); // prevents form submission
  // get the value
  let str = document.getElementById('trigen').value;
  // check to make sure it's there...
  if (!str) return alert("Please select an option...");
  var xhttp;
  ......

You're sending the data via GET (when you use the ?q=val on your URL, the data is being sent through GET. So, you can receive it in your PHP with this:

$trigen=$_GET['q'];
Kinglish
  • 23,358
  • 3
  • 22
  • 43