I have a program that I'm making that takes a database gets the top 5 rows from that database and presents it to a user when a button is clicked on the website I have made. I was able to get the database data to print on the page where the button was clicked, but I want it to be printed to another page that I have created. Here is my code so far for the main page with the buttons and the PHP code to get the database information(the file is called file1.php):
<html>
<head>
<title>Testing SQL DB</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
function myAjax () {
$.ajax( { type : 'POST',
data : { },
url : 'query.php', // <=== CALL THE PHP FUNCTION HERE.
success: function ( data ) {
document.getElementById("dbResult").innerHTML = data; // Get the element with id="demo"
},
error: function ( xhr ) {
alert( "error" );
}
});
}
</script>
</head>
<style>
h1
{
text-align: center;
font-size: 45px;
}
.radio-input
{
font-size: 35px;
}
.radio
{
font-size: 45px;
display: block;
vertical-align: top;
margin-right: 3%;
margin-bottom: 30%;
text-align: center;
}
.buttons
{
text-align: center;
}
.jumbotron {
position: relative;
background: #dca7ea url("dogGif.gif") center center;
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
height: 50%;
background-repeat: no-repeat;
overflow: hidden;
}
.jumbotron2
{
min-height: 50%; /* Fallback for browsers do NOT support vh unit */
min-height: 40vh; /* These two lines are counted as one :-) */
background-color: #fb6f74;
display: flex;
align-items: center;
}
#dbResult
{
text-align: center;
}
</style>
<body style = "background-color: #dca7ea;">
<h1>Pet Name generator! The perfect name for your pet.</h1>
<div class="jumbotron">
<div class="container">
</div>
</div>
<div class="jumbotron2">
<div class="container">
<div class="radio">
<label><input type="radio" name="girl">Girl</label>
<label><input type="radio" name="boy">Boy</label>
<button type="button" class="btn btn-default">Normal names</button>
<button type="button" class="btn btn-default">Specialty names</button>
<a href="file2.php" target="_blank"><button id="submit_btn" onclick="myAjax()" type="button" class="btn btn-default">Random name</button></a>
<p method="post" action="file2.php" id="dbResult" name="databaseNames">No results </p>
</div>
</div>
</div>
</body>
</html>
My query.php file is as follows:
<?php
$db = mysqli_connect('localhost','root','','names_tbl');
if($db->connect_errno > 0){
die('Unable to connect to database [' . $db->connect_error . ']');
}
$query = "SELECT * FROM names_tbl.general_names LIMIT 5;";
$result = mysqli_query($db, $query);
while($row = mysqli_fetch_assoc($result))
{
echo "<u>".$row['Name']."</u>";
}
?>
Finally, my file I want the data to be transferred on is giving an error saying "Undefined index: dbNames" in file2.php(this is the line in which it's giving me the error in my second file)
<?php
echo("Names: " . $_POST['dbNames'] . "<br/>\n");
?>
No SO posts have been able to help me, so any help on this would be greatly appreciated.