How to make a variable clickable from an AJAX/php query script - php

After advice taken from the community i started work on a AJAX/php script to retrieve data based on a variable from a MySQL database. It works reasonably well now i'd like to be able to click on any of the variables that are shown and that take you to another page whilst remembering your selection. Is this possible?
Here is a link to my website.
Here is my PokemonFight.php code:
<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getpokemon.php?q="+str,true);
xmlhttp.send();
}
}
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px
}
</style>
<title>Pokemon Fight!</title>
</head>
<body>
<h1><center>Pokemon Fight!</center></h1>
<h2>Select your type!</h2>
<form>
<select name="test" onchange="showUser(this.value)">
<option value="">Select a Pokemon Type!:</option>
<option value="1">Normal</option>
<option value="2">Fire</option>
<option value="3">Fighting</option>
<option value="4">Water</option>
<option value="5">Flying</option>
<option value="6">Grass</option>
<option value="7">Poison</option>
<option value="8">Electric</option>
<option value="9">Ground</option>
<option value="10">Psychic</option>
<option value="11">Rock</option>
<option value="12">Ice</option>
<option value="13">Bug</option>
<option value="14">Dragon</option>
<option value="15">Ghost</option>
<option value="16">Dark</option>
<option value="17">Steel</option>
<option value="18">Fairy</option>
</select>
</form>
<br>
<div id="txtHint"><b>Pokemon info will be listed here...</b></div>
</body>
</html>
Here is my getpokemon.php code:
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','root','password','pokemon');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"pokemon");
$sql="SELECT * FROM test WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Pokemon Name</th>
<th>PokedexID</th>
<th>Move 1</th>
<th>Move 2</th>
<th>Move 3</th>
<th>Move 4</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['PokedexID'] . "</td>";
echo "<td>" . $row['Pokemon_Move_1'] . "</td>";
echo "<td>" . $row['Pokemon_Move_2'] . "</td>";
echo "<td>" . $row['Pokemon_Move_3'] . "</td>";
echo "<td>" . $row['Pokemon_Move_4'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>

The folowing piece of code was what i wasn't understanding but replacing what i previously with this new piece of code added a hyperlink on the Pokemon name which links to another page that i'm creating with an ID value of the PokedexID. Hope this helps anyone that was as stuck as i was.
Before Code:
echo "<td>" . $row['PokedexID'] . "</td>";
After Code:
echo "<td><a href=' viewpokemon.php?PokedexID=" . $row["PokedexID"] . "'>" . $row["Pokemon_Name"] . "</a></td>"

Related

Query MySQL using PHP and AJAX selector form

I'm writing some PHP to query from a MySQL database that I have setup on my WAMP server. I'm also learning PHP and html javascript as I go, so the syntax of both languages is still a little unfamiliar to me.
I am running two files through my server, front.php and back.php. front.php contains a selector form where the user may choose a filter to be applied to the php query to MySQL. back.php receives the selection with $_REQUEST and uses that in a SELECT query to MySQL. I have posted the code relating to the selector form in front.php below.
I receive an "Undefined index: family" error when I compile.
As well, I have included both the front.php and back.php files for reference.
I appreciate any help greatly!
<form method="POST">
<select name="family" onchange="showUser (this.value)">
<option value="empty">Select a Family:</option>
<option value="capacitor">capacitor</option>
<option value="resistor">resistor</option>
<option value="ferrite bead">ferrite bead</option>
</select>
</form>
Here is the $_REQUEST call that receives the above choice in back.php
$sql="SELECT * FROM testv2 WHERE family='".$_REQUEST['family']."'";
$result = mysqli_query($con,$sql);
FRONT.PHP
<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","back.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="family" onchange="showUser(this.value)">
<option value="empty">Select a Family:</option>
<option value="capacitor">capacitor</option>
<option value="resistor">resistor</option>
<option value="ferrite bead">ferrite bead</option>
</select>
</form>
<br>
<div id="txtHint"><b>Filter Info to be Displayed Here.</b></div>
</body>
</html>
BACK.PHP
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$con = mysqli_connect('localhost','root','kelly188','mysql');
mysqli_select_db($con,"testv2");
$sql="SELECT * FROM testv2 WHERE family='".$_REQUEST['family']."'";
$result = mysqli_query($con,$sql);
return var_dump($sql);
echo "<table>
<tr>
<th>ID</th>
<th>Family</th>
<th>Capacitance</th>
<th>Voltage</th>
<th>Price</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['family'] . "</td>";
echo "<td>" . $row['capacitance'] . "</td>";
echo "<td>" . $row['voltage'] . "</td>";
echo "<td>" . $row['price'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
The first piction shows the code with the var_dump return included
The second image is what compiles in my server window when I run the code

PHP Save as PDF not working

Good Day!
I have a dropdown menu which select employee number and shows table data on basis of that particular selection. I have save as pdf code which saves table data in pdf. It is working fine but my table column headers are only shown not the values.
I have dropdown in one file having javascript which is sent to another file where my table is shown.
Below is the code for my all files and what I have tried for this so far.
For Dropdown:
<?php
include("connect-db.php");
?>
<html>
<head>
<title>PHP insertion</title>
<link rel="stylesheet" href="css/insert.css" />
<link rel="stylesheet" href="css/navcss.css" />
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","search_empnumber.php?emp_id="+str,true);
xmlhttp.send();
}
}
/*function showAssessories(acc) {
if (acc == "") {
document.getElementById("txtHint2").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint2").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getassessories.php?emp_id="+acc,true);
xmlhttp.send();
}
}*/
</script>
</head>
<body>
<div class="maindiv">
<?php include("includes/head.php");?>
<?php include("menu.php");?>
<div class="form_div">
<form>
<div class="forscreen">
<h1>Search Records:</h1>
<p>You may search by Employee Number</p>
<select name="employeenumber" class="input" onchange="showUser(this.value)">
<option value="">Please Select Employee Number:</option>
</div>
<?php
$select_emp="SELECT distinct(emp_number) FROM employees";
$run_emp=mysql_query($select_emp);
while($row=mysql_fetch_array($run_emp)){
$emp_id=$row['emp_id'];
$first_name=$row['first_name'];
$last_name=$row['last_name'];
$emp_number=$row['emp_number'];
$total_printers=$row['total_printers'];
$total_scanners=$row['total_scanners'];
$total_pc=$row['total_pc'];
$total_phones=$row['total_phones'];
$other_equips=$row['other_equips'];
?>
<option value="<?php echo $emp_number;?>"><?php echo $emp_number;?></option>
<?php } ?>
</select>
<html>
</form>
</div>
<br>
<div id="txtHint"></div>
<br>
<div id="txtHint2"></div>
</div>
<?php include 'includes/foot.php';?>
</body>
</html>
The function for dropdown: onchange="showUser(this.value)"
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","search_empnumber.php?emp_id="+str,true);
xmlhttp.send();
}
}
search_empnumber.php File:
<!DOCTYPE html>
<html>
<form action="search_empnumber.php" method="POST">
<input type="submit" value="SAVE AS PDF" class="btnPDF" name="submit" />
</form>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
.link{ color:#00F; cursor:pointer;}
</style>
</head>
<body>
<?php
//$emp_id =($_REQUEST['emp_id']);
$emp_id =($_REQUEST['emp_id']);
$count=1;
include("connect-db.php");
//$sql = "SELECT * from employees where department='".$department."'";
//$sql = "select * from employees as pg inner join accessories as pd on pg.emp_number= pd.emp_number ";
//$result = mysql_query($sql) or die(mysql_error());
//$result = mysql_query($query) or die(mysql_error());
//$emp_id =($_POST['employeenumber']);
$sql="SELECT * FROM employees WHERE emp_number = '".$emp_id."'";
$result = mysql_query($sql) or die(mysql_error());
$count=1;
echo "<table>
<tr>
<th>S.No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Employee Number</th>
<th>Department</th>
<th>Email</th>
<th>Total Printers</th>
<th>Total Scanners</th>
<th>Total Pc</th>
<th>Total Phones</th>
<th>Other Equipments</th>
</tr>";
while($row = mysql_fetch_array($result)){
echo "<tr>";
echo "<td>" . $count . "</td>";
echo "<td>" . $row['first_name'] . "</td>";
echo "<td>" . $row['last_name'] . "</td>";
echo "<td>" . $row['emp_number'] . "</td>";
echo "<td>" . $row['department'] . "</td>";
echo "<td>" . $row['email'] . "</td>";
echo "<td>" . $row['total_printers'] . "</td>";
echo "<td>" . $row['total_scanners'] . "</td>";
echo "<td>" . $row['total_pc'] . "</td>";
echo "<td>" . $row['total_phones'] . "</td>";
echo "<td>" . $row['other_equips'] . "</td>";
echo "</tr>";
$count++;
}
echo "</table>";
echo '<div class="forscreen">';
// echo '<br />';echo '<button class="btnPrint" type="submit" value="Submit" onclick="window.print()">Print</button>';
//echo '<input type="submit" value="SAVE AS PDF" class="btnPDFsearch" name="submit"/>';
// echo '<input type="submit" value="SAVE AS PDF" class="btnPDF" name="submit" />';
echo '</div>';
echo '<div class="forscreen">';
//echo '<br />';echo '<button class="btnPrevious" type="submit" value="Submit" onclick="history.back(); return false;">Previous Page</button>';
echo '</div>';
?>
</body>
</html>
PDF code (I tried) in same file of search_empnumber:
<?php
error_reporting(E_ALL ^ E_DEPRECATED);
include('connect-db.php');
?>
<?php
//if($_POST['submit']){
if (isset($_POST['submit'])){
require_once 'includes/practice.php';
$pdf->SetFont('times', '', 11);
$tb1 = '</br></br>
<table cellspacing="0" cellpadding="5" border="1">
<tr style="background-color:#f7f7f7;color:#333; ">
<td width="60">First Name</td>
<td width="60">Last Name</td>
<td width="80">Employee Number</td>
<td width="80">Department</td>
<td width="60">Email</td>
<td width="80">Total Printers</td>
<td width="80">Total Scanners</td>
<td width="60">Total PCs</td>
<td width="60">Total Phones</td>
<td width="60">Other Equipments</td>
</tr>
</table>';
include('connect-db.php');
//$emp_id =($_POST['emp_id']);
$emp_id =($_POST['employeenumber']);
$result1= mysql_query("SELECT * FROM employees where emp_number = '".$emp_id."'");
while($row = mysql_fetch_assoc($result1)){
$tb2 = '<table cellspacing="0" cellpadding="5" border="1">
<tr>
<td width="60">' . $row['first_name'] . '</td>
<td width="60">' . $row['last_name'] . '</td>
<td width="80">'. $row['emp_number'] .'</td>
<td width="80">'.$row['department'].'</td>
<td width="60">'.$row['email'].'</td>
<td width="80">'.$row['total_printers'].'</td>
<td width="80">'.$row['total_scanners'].'</td>
<td width="60">'.$row['total_pc'].'</td>
<td width="60">'.$row['total_phones'].'</td>
<td width="60">'.$row['other_equips'].'</td>
</tr>
</table>';
$tb1 = $tb1.$tb2;
}
$pdf->writeHTML($tb1, true, false, false, false, '');
ob_end_clean();
$pdf->Output('Report.pdf', 'D');
}
?>
The files i.e. practoce.php and pdf libraries are not added becuase they are just creating tables in defined formats
You are mixing up GET and POST. Try one (or both) of the following:
1) In the dropdown code, replace <form> with:
<form method="POST">
2) In the table generation code, read the value back with:
$emp_id =($_REQUEST['employeenumber']);
and also:
if (isset($_REQUEST['submit'])){
To add to your problems, in the first version of search_empnumber.php you posted, you read back $emp_id =($_REQUEST['emp_id']); when the posted value will actually be in $_REQUEST['employeenumber'].
I don't know which part is going wrong for you, but there's some strange things going on in that dropdown code:
<select name="employeenumber" class="input" onchange="showUser(this.value)">
<option value="">Please Select Employee Number:</option>
</div> <!-- ISSUE: Closed a div which was never opened. You're lucky the select box even shows anything-->
<?php
$select_emp="SELECT distinct(emp_number) FROM employees";
$run_emp=mysql_query($select_emp);
//ISSUE: You loop through a lot of data, but then do nothing with it. With every pass of the loop, you simply change the variables, and nothing else. I think you meant to move your <option> into the loop
while($row=mysql_fetch_array($run_emp)){
//ISSUE: You only selected 'emp_number' in your query. Most of these array keys are never filled
$emp_id=$row['emp_id'];
$first_name=$row['first_name'];
$last_name=$row['last_name'];
$emp_number=$row['emp_number']; //This is the only one filled
$total_printers=$row['total_printers'];
$total_scanners=$row['total_scanners'];
$total_pc=$row['total_pc'];
$total_phones=$row['total_phones'];
$other_equips=$row['other_equips'];
?>
<!--ISSUE: Only the last $emp_number from the query is filled. The rest you kept overwriting in your loop-->
<option value="<?php echo $emp_number;?>"><?php echo $emp_number;?></option>
<?php } ?>
</select>

Can I select mysqli db rows using ajax?

I'm creating a program in php where the user chooses a letter and then in the screen are printed all the names starting with this letter which are stored in my mysql "presta_prova" database.
Here is my code (php file):
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
td,
th {
border: 1px solid black;
padding: 5px;
}
th {
text-align: left;
}
</style>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "presta_prova.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Scegliete una lettera:</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</form>
<br>
<div id="txtHint"><b>Vedi qui i tipi ti marche:</b>
</div>
<?php $q=i ntval($_GET[ 'q']); $con=m ysqli_connect( 'localhost', 'root', 'evolvia2016', 'presta_prova'); if (!$con) { die( 'Could not connect: ' . mysqli_error($con)); } mysqli_select_db($con, "presta_prova"); $sql="SELECT * FROM presta_prova WHERE marca LIKE '"
.$q%. "' "; $result=m ysqli_query($con,$sql); echo "<table>
<tr>
<th>Marca</th>
<th>Descrizione</th>
</tr>"; while($row=m ysqli_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row[ "marca"] . "</td>"; echo "<td>" . $row[ "descrizione"] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con); ?>
</body>
</html>
But when I choose a letter this is my output. Instead of my rows of the database this program outputs the head of the table.Have I done something wrong with my code? Maybe this way doesnt work for mysqli database? Thanks!
Here is my database :
If the aim is to populate the table with new rows rather than appending the response into a div which is how it appears then you could restructure the code and use POST like this.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
ob_clean();
/* Forgot to change this to POST! */
$q=intval($_POST[ 'q']);
$con=mysqli_connect( 'localhost', 'root', 'evolvia2016', 'presta_prova');
if (!$con)die( 'Could not connect: ' . mysqli_error($con));
mysqli_select_db($con, "presta_prova");
$sql="SELECT * FROM presta_prova WHERE marca LIKE '".$q."%' ";
$result=mysqli_query($con,$sql);
$html=array("<tr><th>Marca</th><th>Descrizione</th></tr>");
while( $row=mysqli_fetch_array($result) ) {
$html[]="<tr><td>" . $row[ "marca"] . "</td><td>" . $row[ "descrizione"] . "</td></tr>";
}
mysqli_close($con);
exit( implode(PHP_EOL,$html) );
}
?>
<!DOCTYPE html>
<html>
<head>
<title>gotta have a title</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
td,
th {
border: 1px solid black;
padding: 5px;
}
th {
text-align: left;
}
</style>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST", location.href, true );/*"presta_prova.php"*/
/* send the content-type header */
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
/* my mistake here, this should be like this rather than object literal. */
xmlhttp.send( 'q='+str );
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser( this.value )">
<option value="">Scegliete una lettera:</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</form>
<br>
<div id="txtHint"><b>Vedi qui i tipi ti marche:</b>
</div>
<table id='results'>
<tr>
<th>Marca</th>
<th>Descrizione</th>
</tr>
</table>
</body>
</html>
Fully working example without database interaction but to show the selection mechanism working.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
ob_clean();
$q=intval( $_POST[ 'q'] );
$t=$_POST['text'];
/* emulated database search and results being generated */
$html=array('<tr><th>Marca</th><th>Descrizione</th></tr>');
for( $i=0; $i < 10; $i++ ) $html[]='<tr><td>Marca:'.$i.' q='.$q.'</td><td>Descrizione:'.$i.' text='.$t.'</td></tr>';
header( 'Content-Type: text/html' );
exit( implode( PHP_EOL, $html ) );
}
?>
<!DOCTYPE html>
<html>
<head>
<title>gotta have a title</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
td,
th {
border: 1px solid black;
padding: 5px;
}
th {
text-align: left;
}
</style>
<script>
function showUser(o) {
if (o.value == '') {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open( "POST", location.href, true );
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.send( 'q='+o.value+'&text='+o.options[o.options.selectedIndex].text );
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser( this )">
<option value="">Scegliete una lettera:</option>
<?php
/* Generate each letter of the alphabet as an option */
for( $i=0; $i<26; $i++ ){
$char=chr( $i + 65 );
$int=$i+1;
echo "<option value='$int'>$char";
}
?>
</select>
</form>
<br>
<div id="txtHint"><b>Vedi qui i tipi ti marche:</b>
</div>
<table id='results'><!-- results will overwrite the table innerHTML -->
<tr>
<th>Marca</th>
<th>Descrizione</th>
</tr>
</table>
</body>
</html>

Php ajax database info fetch returning nothing from batabase

I am using ajax to fetch information for my database and im running into a problem. nothing is being shown in return.
I have a select list that calls for a js script to run onchange, that calls for the php file to get the database information and return it in a table.
the problem is that upon the onchange event, I have a table show up with just the table heads but no information below. I checked console and the error Im getting is this:
GET http://lineofcode.com/favicon.ico 401 (Unauthorized)
thats the only error that shows. What am i doing wrong? why is my table blank?
html
<p>Please select a team name from the list to view table</p>
<form>
<select name="users" onchange="showTeam(this.value)">
<option value="">Select a team:</option>
<option value="1">bobcats</option>
<option value="2">rangers</option>
<option value="3">hawks</option>
<option value="4">rockets</option>
</select>
</form>
<br>
<div id="teamInfo"><b></b></div>
JS script
// script for onchange event
function showTeam(str) {
if (str == "") {
document.getElementById("teamInfo").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("teamInfo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","phpfiles/getTeam.php?q="+str,true);
xmlhttp.send();
}
}
php file
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','....','.....','....');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM teams WHERE teamname = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>teamname</th>
<th>city</th>
<th>bestplayer</th>
<th>yearformed</th>
<th>website</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['teamname'] . "</td>";
echo "<td>" . $row['city'] . "</td>";
echo "<td>" . $row['bestplayer'] . "</td>";
echo "<td>" . $row['yearformed'] . "</td>";
echo "<td>" . $row['website'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
Just an observation but shouldn`t code be like this ?
xmlhttp.open("GET","phpfiles/getTeam.php?q="+str,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("teamInfo").innerHTML = xmlhttp.responseText;
}
};
Also try to print_r($_GET) to see if the value is being posted
Not sure if this is the problem but you are using intval() --e.g. for converting input string to integers --and your teamnames in your database won't match that (assuming you've given your teams names and not numbers).

Execute PHP Mysql query on the basis of select option value

I have a select input having several options in it as html and I want to execute a query on the basis of a selected value in the dropdown list.
<select name="test">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="mango">mango</option>
</select>
I want to execute the following query with a criterion value selected in the above drop down list.
<?php $sql=mysqli_query($con,"select * from tblsession where sessionid='".$_REQUEST['test']."'"); ?>
pls help.
Okay, in this same page your going to have to use some javascript so you can be capable of working on AJAX.
So here's the code for the first page:
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("para").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("para").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="test" onchange="showUser(this.value)">
<option value="Apple">Apple</option>
<option value="Bannana">Bannana</option>
<option value="Bannana">Mango</option>
</select>
</form>
<br>
<div id="para"><b>What you will excute will be listed here...</b></div>
</body>
</html>
And this is getuser.php
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('host','username','password','db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"db");
$sql="SELECT * FROM test WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['apple'] . "</td>";
echo "<td>" . $row['bannana'] . "</td>";
echo "<td>" . $row['mango'] . "</td>";
}
mysqli_close($con);
?>
</body>
</html>

Categories