JS/PHP POST to php script for database query

I’m trying to get Input from a User and then Post it to another PHP Script to use the input for a MariaDB query.

Index.php:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device.width, inital-scale=1">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- jQuery UI library -->
    <link rel="stylesheet" 
    href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <!-- Initialise autocomplete -->
    <script type="text/javascript" src="jquery.js"></script>
   
</head>

<body>
   <form>
      <input type="text" id="name" name="search" placeholder="Enter Gene Name...">
      <button id="searchBtn" type="button" name="btn" onclick="post()" >Search</button>
   </form>
      
    <script>
        function post() {
        var name = document.getElementById("name").value;

        $.ajax({
                type : "POST", 
                url  : "search.php",  
                data : { name : name},
                success: function(res){  
                        }
            });
        }
    </script>
</body>

</html>

Search.php

<?php    
$name = $_POST['name'];

echo $name;

$dbhost = 'localhost';
$dbuser = '****';
$dbpass = '****';
$conn = mysqli_connect($dbhost, $dbuser, $dbpass);

// select and print all from database
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM cardiomic_database.genes WHERE gene LIKE '%".$name."%'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
    echo $row["gene"]. "<br>";
  }
} else {
  echo "0 results";
}
$conn->close();
?>

I assume there are many mistakes. The idea is to get the user input in the text file with id=”name” which should be posted to search.php and there be used in the DB query. I don’t have any errors it is just not working. Any suggestions?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I can derive issue in form event. Please keep below form only and remove all other forms and let me know if issue persist.

<form>
    <input type="text" id="name" name="search" placeholder="Enter Gene Name...">
    <button id="searchBtn" type="button" name="btn" onclick="post()" >Search</button>
</form>

Please try to update post function as below.

<script>
    function post() {
    var name = document.getElementById("name").value;

    $.ajax({
            type : "POST", 
            url  : "search.php",  
            data : { name : name},
            success: function(res){ 
                $("body").prepend(res); 
            }
        });
    }
</script>

Method 2

Why you wanna use ajax here..?, while you can simply submit the form to the php file directly.

<form method="post" action="search.php">
    <input type="text" id="name" name="search" placeholder="Enter Gene Name...">
    <button id="searchBtn" type="submit" name="btn">Search</button>
</form>

If you really wanna use ajax then I don’t see any problem here TBH, but my way of using it would be.

$.post("search.php", {
           name : name
        }, function (data, status) {
        //  alert (data + 'n' + "status" + status);
            if (status === 'error') {
                console.log("error"); // For debugging purpose
            } else if (status === 'success') {
              console.log("dont");
            }
        });


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x