HTML 表单数据未发布以在 SQL 查询中使用

Question

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 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 " 使用 AJAX 在 HTML 页面上显示结果

if I set $trigen manually it works, but not when I choose the option in the form as set out in this code:--如果我手动设置 $trigen 它可以工作，但当我选择此代码中列出的表单中的选项时则不行：-

my HTML:-我的 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"然后是“getcustomer.php”中的我的 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();
?>

Answer 1

Your button is causing a form submission.您的button导致表单提交。 Just add preventDefault() as the first line of your showResults function and it will prevent the form from submitting naturally.只需将preventDefault()添加为showResults function 的第一行，它将阻止表单自然提交。 You're handling the form submission via ajax.您正在通过 ajax 处理表单提交。 Also you don't need to have an action or method on your <form tag for the same reason.出于同样的原因，您也不需要在<form标记上使用操作或方法。 Another way of preventing the form from submitting is like this: <form onsubmit="return false"另一种阻止表单提交的方法是这样的： <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 以找到您要发送的值，因为您实际上并没有通过 function 调用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:您通过 GET 发送数据（当您在 URL 上使用？q=val 时，数据正在通过 GET 发送。因此，您可以在 PHP 中接收它：

$trigen=$_GET['q'];

HTML 表单数据未发布以在 SQL 查询中使用

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-05-23 17:22:39

HTML 表单数据未发布以在 SQL 查询中使用

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-05-23 17:22:39

解决方案1
2 已采纳 2021-05-23 17:22:39