Develop Reference

Click a <td> element to cause a self posting event with an SQL query involving multiple tables. PHP

What I have is a table that is pulled from a database. The goal is that I want to be able to click on any team and have a self posted page produce a table with previous yearly results per row (multiple tables, year by year) and a row of total stats. For example: Click on San Jose and get 2014-2015 stats in 1 row, 2015-2016 in the next row and then a total of all the seasons added up. Not really sure how to implement it. I would love to get some suggestions on the best way to attack this problem.
Link To My Project
Here is some of my code, so you can see how I am doing it so far.
$query = "SELECT * FROM standings2015_2016 WHERE confid='2' ORDER BY pts DESC, losses ASC, otl ASC, gf-ga DESC";
$result = $db->query($query);
echo "<h3>Western Conference</h3>";
echo "<table class='table sortable'>";
echo "<tr class='TableHeaders'>";
echo "<td class='hover'>Place</td>";
echo "<td class='hover'>Team</td>";
echo "<td class='hover'>Wins</td>";
echo "<td class='hover'>Losses</td>";
echo "<td class='hover'>OTL</td>";
echo "<td class='hover'>Points</td>";
echo "<td class='hover'>GF</td>";
echo "<td class='hover'>GA</td>";
echo "<td class='hover'>+ / -</td>";
echo "</tr>";
$i = 0;
foreach ($result as $row) {
$i++;
$plusMinus = ($row['gf'] - $row['ga']);
echo "<tr>";
echo "<td>";
echo $i;
echo "</td><td class='hover2'>";
echo stripslashes($row['name']);
echo "</td><td>";
echo stripslashes($row['wins']);
echo "</td><td>";
echo stripslashes($row['losses']);
echo "</td><td>";
echo stripslashes($row['otl']);
echo "</td><td>";
echo stripslashes($row['pts']);
echo "</td><td>";
echo stripslashes($row['gf']);
echo "</td><td>";
echo stripslashes($row['ga']);
echo "</td><td>";
echo $plusMinus;
echo "</td>";
echo "</tr>";
}
echo "</table>";
So echo stripslashes($row['name']); is the team name I want to click on. Can this be done with an onclick event to prompt a query and a self post?

In order to do what you want, we can use jQuery and Ajax.
First is to download jQuery here.
Then create a link element for each team name that has class and data-artid tag:
echo ''.stripslashes($row['name']).'';
Then create the script:
<script src="jquery-1.9.1.min.js"></script> <!-- REPLACE NECESSARY JQUERY FILE DEPENDING ON THE VERSION YOU HAVE DOWNLOADED -->
<script type="text/javascript">
$(document).ready(function(){ /* PREPARE THE SCRIPT */
$(".teamname").click(function(){ /* WHEN A TEAM IS CLICKED */
var elem = $(this); /* STORE THE CLICKED TEAM */
var teamid = elem.attr("data-artid"); /* GET THE ID OF THE CLICKED TEAM NAME */
$.ajax({ /* PREPARE THE AJAX */
type: "POST", /* METHOD TO BE USED TO PROCESS THE PASSED DATA */
url: "action.php", /* THE PAGE WHERE THE DATA WILL BE PROCESSED */
data: {"teamid": teamid}, /* THE DATA WE WILL PASS */
success: function(result){
$("#content").html(result); /* WE WILL SHOW THE RETURNED DATA TO YOUR CONTENT DIV */
} /* END OF SUCCESS */
}); /* END OF AJAX */
});
});
</script>
And for your action.php, which will process the passed on data using Ajax:
<?php
/* INCLUDE YOUR DB CONNECTION HERE */
if(!empty($_POST["teamid"])){
$tr = '
<table class="table sortable">
<tr class="TableHeaders">
<td class="hover">Team</td>
<td class="hover">Wins</td>
<td class="hover">Losses</td>
<td class="hover">OTL</td>
<td class="hover">Points</td>
<td class="hover">GF</td>
<td class="hover">GA</td>
</tr>
';
$result = $db->query("SELECT name, wins, losses, otl, pts, gf, ga FROM standings2014_2015 WHERE teamid = '".$_POST["teamid"]."'");
foreach ($result as $row) {
$tr .= '
<tr>
<td>'.$row["name"].'</td>
<td>'.$row["wins"].'</td>
<td>'.$row["losses"].'</td>
<td>'.$row["otl"].'</td>
<td>'.$row["pts"].'</td>
<td>'.$row["gf"].'</td>
<td>'.$row["ga"].'</td>
</tr>
';
} /* END OF LOOP */
$tr .= '</table>';
echo $tr; /* RETURN THIS TO AJAX */
} /* END OF NOT EMPTY teamid */
?>

You can assign an ID to each one of the teams in your database and then use that ID to pull the information in one php file. In that file you can just get the ID perform the query search and display the information in a different page.
In the index.php where you display all the teams you can add a link to the team.php.
echo "<a href=\"team.php?Id=".$team['Id']."\">";
team.php
if (isset($_GET['Id']) && is_numeric($_GET['Id']))
{
// Perform database query
$teamID = mysql_escape_string($_GET['Id']);
// Assign the query to a variable
$query = "SELECT name, wins, losses, otl, pts, gf, ga FROM standings2014_2015 WHERE Id=".$teamID.";";
$result = $conn->query($query);
// If the user exists
if ($result)
{
while ($team = $result->fetch_assoc())
{
echo $team["name"];
echo $team["wins"];
....
// Display the information in the table
}
}

I suggest this code:
For standings.php modify this:
echo stripslashes($row['name']);
by:
echo "<a href=\"standings.php?name=".stripslashes($row['name'])."\">";
Then standings.php should view like this:
if (isset($_GET['name']) && !is_empty($_GET['name']))
{
$kname = mysql_escape_string($_GET['name']);
$query = "SELECT name, wins, losses, otl, pts, gf, ga FROM standings2014_2015 WHERE name=".$kname.";";
$result = $db->query($query);
if ($result)
{ echo "<table class='table sortable'>";
foreach ($result as $row)
{
$tr .= '
<tr>
<td>'.$name.'</td>
<td>'.$wins.'</td>
<td>'.$losses.'</td>
<td>'.$otl.'</td>
<td>'.$pts.'</td>
<td>'.$gf.'</td>
<td>'.$ga.'</td>
</tr>
';
echo $tr;
}
echo "</table>";
}
}else{
//YOUR ACTUAL CODE
}

onclick delete will always delete the last row of the table

I have this inside a while loop. Everytime I confirm the onclick delete of any table row it always deletes the last row.
echo '<td><img src=img/view.png width=20px height=20px id="view"></td>';
echo '<td><img src="img/delete.png" width=20px height=20px name="delete"></td></tr>';
?>
<script type="text/javascript">
function deleteShit()
{
if (confirm('Delete?'))
window.location='delete.php?id=<?php echo $id;?>'
}
this is the delete.php page
$id=$_GET['id'];
$query = "UPDATE `main` SET status=0 where id = $id";
$sql = $db->prepare($query);
if ($sql->execute()) {
echo "<script>
window.alert('Item deleted!')
window.location='view.php';
</script>";
}

You must write your javascript function outer the while, with an arg :
<script type="text/javascript">
function deleteShit(id)
{
if (confirm('Delete '+id+'?')) {
window.location = 'delete.php?id='+id;
}
}
</script>
And call the function with the arg :
echo '<td><img src="img/delete.png" width=20px height=20px name="delete"></td></tr>';

Getting text and sending it to a php function using javascript

I have a php function which displays all the data in my mysql table and allows the user to delete data not needed. I managed to get the data to show in a table, get the delete button to ask for confirmation using javascript, but when i try to get the value in the 2nd cell of the table with the query result (the name) and display it on the confirmation tab, it says undefined. Why is that happening? From what i understand, document.getElementById("myText").value where myText is the id of the cell, should return the value in the cell, correct? Also, how would i call and send that value to another php file that has the delete query?
<?php
$row = mysqli_fetch_array($result);
echo "<table>";
echo "<tr class='header'><td class='header'>Delete</td>";
echo "<td class='header'>Added</td>";
echo "<td class='header'>Name</td>";
echo "<td class='header'>Genre</td>";
echo "<td class='header'>Developer</td>";
echo "<td class='header'>Rating</td></tr>";
?>
<script type="text/javascript">
function ConfirmDelete(){
var name = document.getElementById("name").value;
if (confirm("Delete" +name+"?")){
//send the value and call the php
}
}
</script>
<?php
for ($x=0; $row; $x++) {
echo "<tr><td><input type='button' onclick='ConfirmDelete()' name='deleteGame' value='DELETE'></td><td>$row[Added]</td><td id='name'>$row[Name]</td><td>$row[Genre]</td><td>$row[Developer]</td><td align='right'>$row[Rating]</td></tr>";
$row = mysqli_fetch_array($result);
}
?>
</table>

checking dynamically created textboxes for values

I am creating a form for inserting data which technologies are being used by which customers.
I get data of customer's ID and name and select a customer in an drop-down list, and i get data from technologies id and description and display description in a table + it creates a textbox (ID='box-". $row1['ID_T']."') for every technology entry in a DB.
So now i would like to check this dynamically created textboxes with jquery for value (if empty or filled with data) (getelementbyid) but i can not find a way to check theese DYN textboxes.
The ID_T and ID_C will be loaded into another table containing these two PK's and add string from textbox to value.
i would appreciate your help so much!
<HTML>
<HEAD>
<SCRIPT>
function update_tech(id,description)
{
var x = confirm('Do you want to edit technology '+description);
if (x == true)
{
document.getElementById('update_id').value = id;
//document.getElementById('description').value = description;
//document.form_update.submit();
}
}
</SCRIPT>
</HEAD>
<?php
include "connection.php";
$sql = "SELECT ID_C, Name FROM empresa";
$rs = mysql_query($sql, $conn);
$sql2 = "SELECT ID_T, description FROM technologies";
$rs2 = mysql_query($sql2, $conn);
while($row = mysql_fetch_array($rs2))
{
if (isset($_POST["box-".$row["ID_T"]]))
if ($_POST["box-".$row["ID_T"]] != "")
echo "INSERT ....".$_POST["box-".$row["ID_T"]]."<br>";
}
$rs2 = mysql_query($sql2, $conn);
mysql_close($conn);
?>
<BODY>
<SELECT NAME="customers" ONCHANGE="showCustomer(this.value)">
<?php
if (mysql_num_rows($rs))
{
while($row = mysql_fetch_array($rs))
{
?>
<option value='<?php echo $row['ID_C'] ?>'><?php echo $row['Name']?></option>
<?php
}
}
else {
echo "<option value=\"0\">No customers</option>";
}
?>
</SELECT>
<FORM METHOD="POST">
<?php
echo "<table border='0'>";
while($row1 = mysql_fetch_array($rs2))
{
echo "<tr>";
echo "<td><INPUT TYPE='text' name='box-". $row1['ID_T']."' ID='box-". $row1['ID_T']."'></td>";
echo "<td>" . $row1['description'] . "</td>";
echo "</tr>";
}
echo "</TABLE>";
?>
<INPUT TYPE="SUBMIT">
</FORM>
</BODY>
</HTML>

You can either maintain an array of input box ids or use the jquery partial selector to identify all the input boxes.
jQuery approach is something like:
$('input[id^="box-"]').each(function(e, i) { console.log(e); };

How to use the data from the row selected?

How can I collect the data on the row from the table that I select and use it in the result?
Here is the javascript I am using to show the data entry screen, once the function has been called by selecting the row. Now I just need to design a form in PHP that will include (1) some of the data from the row selected and (2) some new data that will be collected.
Here is the Javascript to select the row and call the data entry form
$(document).ready(function () {
$("tr").live('click',function(){
$.post('data_entry_form.php', function(data) {
$('#section2').html(data);
});
});
});
Here is the PHP Script
<?php
require_once "config.php";
$dbh = new PDO($dsn, $dbuser, $dbpass);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$result = $dbh->query("SELECT aif_id, fee_source_id, company_name_per_sedar, document_filing_date FROM a_aif ORDER BY aif_id DESC");
$result->setFetchMode(PDO::FETCH_ASSOC);
echo "<table id=\"all_aifs\">";
echo "<tr>";
echo "<th><b>Document ID</b></th>";
echo "<th><b>Pubco Name</b></th>";
echo "<th><b>Filing Date</b></th>";
echo "<th><b>PDF</b></th>";
echo "</tr>";
foreach($result as $index => $row) {
echo "<tr>";
echo "<td>$row[fee_source_id]</td>";
echo "<td>$row[company_name_per_sedar]</td>";
echo "<td>$row[document_filing_date]</td>";
echo "<td>Placeholder</td>";
echo "</tr>";
}
echo "</table>";
echo "<br>";
$dbh = NULL;
?>

The "Correct" answer to this problem is NOT to read from the DOM. Never a good idea. I suggest you pass the record id to the ajax call and have the ajax call return an already-populated form.
//PHP
//place the data attribute in the tr
echo "<tr data-recordId='".$row['id']."'>";
//JS
$(document).ready(function () {
$("tr").live('click',function(){
//Get the ID from the row clicked
var id = $(this).data('recordId');
//short-hand
$('#section2').load('data_entry_form.php?id='+id);
});
});
Then your ajax page would just read $_REQUEST['id'] to get the id of the form being edited.
//Ajax side PHP
$id = (int)$_REQUEST['id'];
//Fetch data and use it to pre-populate form item
You would pre-populate your inputs like this
<input type="text" value="<?php echo $row['value']; ?>" />
or
echo '<input type="text" value="'.$row['value'].'" />';
NOTE: If your values contain quotes, you will want to replace them with the code "
echo '<input type="text" value="'.str_replace('"', '"', $row['value']).'" />';

Within the event handler, this and $(this) refer to your selected row:
$("tr").live('click',function(){
// this.cells[1] is the cell that contains Pubco Name
// You can also use $(this).children("td")[1]
...
});