Getting text and sending it to a php function using javascript - 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>

Related

javascript document.getElementById only reading first value from php mysql database

Let me try and say this in a way that doesnt get anyone angry or confused.
I have a value that I am outputting into a table.
The value is populated by mysql and php.
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<table>";
echo "<tr>";
echo "<td id='countryDbId'>".$row['country']."</td>";
echo "</tr>";
echo "</table>";
}
$conn->close();
}
?>
Then I try to read all the values that were output with javascript.
<script>
var country = document.getElementById("pp").innerHTML;
console.log(country);
</script>
The output is only the first value even though there are over 100 values in that column.
Any help would be appreciated.

Execute AJAX from Main file after previously inserting data through AJAX

I have a questions for which I need some help.
I have a page which, after it is finished loading, executes an AJAX, creates a table in PHP containing 2 buttons: 1 change password, the other is delete. Once the table is complete it is injected into a div in the main file. That works great so far. Now after that table is loaded, I want to be able to call another AJAX function linked in the JS file in the main page. So I have 3 components:
1. <div id="DbInfo"></div>
That is where I add the information from the users.
my php which executes the code and gets the information from my database.
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "SELECT LoginName FROM table";
$res = mysqli_query($conn, $sql);
if (mysqli_num_rows($res) > 0) {echo "<center>";
echo "<table border='1'>";
echo "<tr>";
echo "<td>User</td>";
echo "<td colspan=2 align=center>Available Functions</td>";
echo "</tr>";
while($row = mysqli_fetch_assoc($res)) {
echo "<tr>";
echo "<td>" . $row['User'] . "</td>";
echo "<td><button type='button' class='smallbutton' id='removeUser' value='" . $row['LoginName'] . "'>Delete User</button></td>";
echo "<td><button type='button' class='smallbutton' id='CPW' value='" . $row['LoginName'] . "'>Change Password</button></td>";
echo "</tr>";
}
echo "</table>";
echo "</center>";
} else {
echo "";
}
mysqli_close($conn);
And lastly the AJAX which does the injection of the created table into the HTML:
$(document).ready(function(){
$.ajax({
method: "POST",
url: "UserData.php",
success: function(data){
//document.getElementById("DbInfo").innerHTML = data;
document.getElementById("DbInfo").html(data);
}
});
});
Again, these functions are working fine. What I want to do after the page is done, be able to click one of these injected buttons and execute another AJAX. Unfortunately the standard declaration that I use for AJAX does not work.
$(document).ready(function(){
$("#removeUser").click(function(){
The question: How can I make sure after the table is injected, that I can call an AJAX function which is linked as an external source (<script src="script.js"></script>) in the main document?
Thanks for your help.
try :
$('#DbInfo').on('click', 'button[id="removeUser"]', function(i,e){
console.log('remove :' + $(this).val());
});

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
}

Save Id from PHP database as variable

I'm working on a offine web application. But on a certain point it need to receive data from a sql database. This is done with an iframe. However the PHP files print all the data available. Every row of data has a workID, and i want them to be clickable. When you click on the work ID i need to save the work ID as variable so i can use the work ID through my whole application.
For example: I choose 1 work ID. Onclick the work ID is written in my header on every page.
I don't know if this can be done with cookies or just a javascript function on the main page.
See the following code:
<?php
$result=mysql_query("SELECT workid,problem,request FROM workreport ORDER BY workid;");
$i=0;
while( $row=mysql_fetch_array($result) )
{
if($i>0)
{
echo "<tr valign=bottom>";
echo "</tr>";
}
echo "<tr valign=center>";
echo "<td class=tabval></td>";
echo "<td class=tabval><b>".htmlspecialchars($row['workid'])."</b></button></td>";
echo "<td class=tabval>".htmlspecialchars($row['problem'])." </td>";
echo "<td class=tabval>".htmlspecialchars($row['request'])." </td>";
$i++;
}?>
PHP is loaded in an iframe. So i prefer to create the function to save the work id on my main page.
<iframe src="http://localhost/receive.php" width="400" height="300" style="border:none;"> </iframe>
Hope you can help me! thanks in advance.
You can do it like this, using javascript and PHP:
PHP:
while( $row=mysql_fetch_array($result) )
{
if($i>0)
{
echo "<tr valign=bottom>";
echo "</tr>";
}
echo "<tr valign=center>";
echo "<td class=tabval></td>";
echo "<td class=tabval><button id=\"saveid\"><b>".htmlspecialchars($row['workid'])."</b></button></td>";
echo "<td class=tabval>".htmlspecialchars($row['problem'])." </td>";
echo "<td class=tabval>".htmlspecialchars($row['request'])." </td>";
$i++;
}
Javascript
window.onload = function () {
document.getElementById('saveid').onclick = function () {
var id = this.innerHTML;
document.cookie = "saveid=" + id + ", expires=Monday, 04-Apr-2020 05:00:00 GMT";
alert('Cookie saved!');
}
}
Okay, the cookie is now saved. You can access it in PHP using $_COOKIE['saveid'].

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]
...
});

Categories

Resources