Get HTML's <TD> Value - javascript

I would like to get the static values from my table data (the tag) and and display it to another page. Should I use jQuery for this or possibly PHP?
Example.php Table:
<table width="100%" class="table table-striped table-bordered table-hover display" id="dataTables-example">
<thead>
<tr>
<th>Race</th>
<th>Role</th>
<th>2015</th>
<th>2016</th>
<th>2017</th>
</tr>
</thead>
<tbody>
<tr class="Testing">
<td>BLAH</td>
<td>ANOTHA_BLAH</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
</table>
I tried doing it in PHP similar to
<form action = "PutTheExampleTableValuesHere.php" method = "post">
TABLE BLAH BLAH BLAH
<input type="submit" name="submit" value="View Line Chart">
and using the $_POST function and simply echoing it to the other pages but my logic failed.
Please guide. Thank you!

with the $_POST logic is way more simpler than using javascript/ajax for this solution. Just put your data in some paragraph or similar and give it a name so you can access it from post from another external page that you call in "method" parameter in form.
example:
index.php:
<form action="test.php" method="post">
<table>
<td>
<div id="blah" name="blah" value="blah">BLAH</div>
</td>
<td>
<div id="anoblah" name="anoblah" value="anotherblah">BLAH</div>
</td>
<input type="submit" id="test" name="test">
</table>
</form>
test.php
<?php
if(isset($_POST["test"]))
echo "td1: ".$_POST["blah"]." td2: ".$_POST["anoblah"];
?>

You can probably use jquery to create an array (using input hidden) in the form structure. Then you can read it after the form submit, using $_POST variable.
<script>
$(document).ready(function(){
$("input[type=submit]").click(function(e) {
e.preventDefault();
var form = $("form");
$(".Testing td").each(function() {
form.append('<input type="hidden" name="data[]" value="' + $(this).html() + '">');
});
form.submit();
});
});
</script>
This will create an array from the TD values under class "Testing" that you can access over $_POST['data'] (type Array).
<?php
if(isset($_POST['data'])) {
foreach($_POST['data'] as $key=>$val) {
echo $key.' = '.$val.'<br>';
}
}
?>

You may use AJAX to post the whole html code to the other page (URL):
$.post(URL, {data: encodeURIComponent($("#dataTables-example").html())})
On the other page(URL), you can use php's $_POST to get it:
<form action = "PutTheExampleTableValuesHere.php" method = "post">
<table ...>
<?php urldecode($_POST['data']) ?>
</table>
<input type="submit" name="submit" value="View Line Chart">
UPDATE:
#SimoneWalter Then you can compose the data in $.post with the TD values. For example:
data = []
$.each($("#dataTables-example TR"), function(tr){
// get td values
tmp = []
$.each($(tr).find('TD'), function(td){
tmp.push($(td).html())
})
data.push(tmp)
})
// post the data
// data will be something like:
// [['Race', 'Role', '2015', ...], ...]
$.post(URL, {data: data})
Then on the other page:
<form action = "PutTheExampleTableValuesHere.php" method = "post">
<table ...>
<thead>
<?php foreach($_POST['data'] as $tr): ?>
<tr>
<?php foreach($tr as $td): ?>
<td><?php echo $td ?></td>
<?php endforeach ?>
</tr>
<?php endforeach ?>
</thead>
</table>
<input type="submit" name="submit" value="View Line Chart">

Related

Adding button to json when populate a table [duplicate]

This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 2 years ago.
I am trying to insert a button when I am populate a table dynamically. I have the data that loads correctly the table and I am able to insert the button. When I click the button it displays the alert box just to check it's working. However when I try to get the data of the first cell of that row it gets the error that $ is not defined.
This is my code:
<?php
$file = 'data.json';
$data = file_get_contents($file);
$json = json_decode($data);
echo"<pre>";
print_r($json);
echo"</pre>";
?>
<form method="POST" action="">
<center><button class="btn btn-primary" name="display">Populate</button></center>
</form>
</div>
<table class="table table-bordered table-example">
<thead class="alert-info">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<?php
$url = 'data.json';
$data = file_get_contents($url);
$json = json_decode($data);
foreach($json as $member){
?>
<tr>
<td><?php echo $member->firstname?></td>
<td><?php echo $member->lastname?></td>
<td><?php echo $member->gender?></td>
<td><button class="btn btn-info button-details" onclick="myFunction()">>detalhes</button>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<div class="col-md-6">
<?php include 'populate_json.php';?>
</div>
</div>
<script type="text/javascript">
function myFunction() {
alert("botao funciona");
$(".table-example").find("tr td:first"); *this is not working
}
include this in your html head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Passing html table data to function

I've used this site a ton but this is the first time posting. Please be kind. I'm trying to pass data from an HTML table to a function using onclick. I'm able to pass the entire table using onclick="markPaid(transaction.innterText), but I want to be able to pass the data from the current data row only. My best attempt is onclick="markPaid(thistransaction.innterText)"but results in an undefined variable when passed to the function "markPaid". Hopefully this is a clear explanation of the issue.
<table id ="transaction" border="1">
<style>th, td {padding: 10px;}</style>
<thead>
<tr>
<th><?php echo implode('</th><th>', array_keys(current($transactions))); ?></th>
<th></th>
</tr>
</thead>
<tbody>
<?php foreach ($transactions as $transaction): array_map('htmlentities', $transaction); ?>
<tr>
<td id = "thistransaction"><?php echo implode('</td><td>', $transaction); ?></td>
<td><a class ="btn btn-default" href="invoice.php?ID=<?php echo $transaction['transid']; ?>" target = "_blank">Print Invoice</a> </td>
<?php if($transaction['paid'] == false): ?>
<td><button class = "btn btn-default" onclick="markPaid(thistransaction.innterText)">Mark as Paid</button></td>
<?php endif; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
I think you are getting undefined with onclick="markPaid(thistransaction.innterText)" because thistransaction is not unique. You are setting thistransaction as an id on every row of your table in your foreach loop. Try using something unique for each row, maybe the transid you echo to the invoice, $transaction[transid]

Dropdown select , update user account activate/deactivate

I'm new in php how can I make this work
delete.php
<?php
include_once 'dbconfig.php';
if($_POST['del_id'])
{
$id = $_POST['del_id'];
$stmt=$db_con->prepare("UPDATE tbluser set status=1 WHERE id=:id");
$stmt->execute(array(':id'=>$id));
}
?>
I want to add an active/inactive dropdown choice in my edit form page but I dont know how to make it work I dont know how to call the delete.php so that when i choose inactive and submit the form it will not show on my datatable
edit_form.php
<?php
include_once 'dbconfig.php';
if($_GET['edit_id'])
{
$id = $_GET['edit_id'];
$stmt=$db_con->prepare("SELECT * FROM tbluser WHERE id=:id");
$stmt->execute(array(':id'=>$id));
$row=$stmt->fetch(PDO::FETCH_ASSOC);
}
?>
<div id="dis">
</div>
<form method='post' id='emp-UpdateForm' action='#'>
<table class='table table-bordered'>
<input type='hidden' name='id' value='<?php echo $row['id']; ?>' />
<tr>
<td>Status</td>
<td><select name=stats>
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" class="btn btn-primary" name="btn-update" id="btn-update">
<span class="glyphicon glyphicon-plus"></span> Save Updates
</button>
</td>
</tr>
</table>
everything is working it's just an additional functionality in the edit form page
Get the stats like $status= $_POST['stats']; in delete.php
change you $_GET['edit_id'] to $_GET['id']
modify you updated to set the status
$id = $_POST['id'];
$status = $_POST['stats']
$stmt=$db_con->prepare("UPDATE tbluser set status=:status WHERE id=:id");
$stmt->execute(array(':status'=>$status,':id'=>$id));
If you want to call the delete.php, you can use ajax.
<script>
$.ajax({
url:'delete.php',
type:'post',
data: $('form').serialize()
});
</script>
You can get values on the delete.php, with the help of $_POST or $_REQUEST.
And if the delete.php code is right, then on submit of the edit_page.php your datatable can get affected.

Echo PHP Variable to Button Value Then Send Button Value to Input text

Hello I am wanting to echo a PHP Variable to a buttons value then send the buttons value to an input text. I was able to echo the button with the variable but when I click the button it does nothing. I'm not sure why, because when I do this without the PHP just the script, and inputs it works perfectly. I am just missing something I know it, I can't find much info on how to pass php to a button then pass the button value to an input text.
Here's the script that passes the button value to the input text:
$( document ).ready(function() {
var $theButtons = $(".button");
var $theinput = $("#theinput");
$theButtons.click(function() {
$theinput.val(this.value);
});
});
Here's the PHP that echos the variable as a button:
require "config.php"; // database connection
$in=$_GET['txt'];
if(!ctype_alnum($in)){ //
echo "Search By Name, or Entry ID";
exit;
}
$msg="";
$msg="";
if(strlen($in)>0 and strlen($in) <20 ){
$sql="select name, entry, displayid from item_template where name like '%$in%' LIMIT 10"; // the query
foreach ($dbo->query($sql) as $nt) {
//$msg.=$nt[name]."->$nt[id]<br>";
$msg .="<table style='table-layout:fixed;'> // Just the start of my table
<tr>
<td>Name</td>
<td>Entry ID</td>
<td>Display ID</td>
</tr>
<tr>
<td align=center><a href=http://wowhead.com/item=$nt[entry]>
$nt[name]</a>
</td>
<td>$nt[entry]</td>
<td>
<input type=button class=button value=$nt[displayid]> // The Value I need echoed out in a button is $nt[displayid]
</td>
</tr>
</table>"; // end of my table}
}
$msg .='';
echo $msg;
Not that it matters but here is the input text
<input type="text" id="theinput"/>
Make it easy on yourself and try to make your code easy to read. I personally prefer to write my html cleanly and outside of echo statements like so:
Html
if (strlen($in) > 0 and strlen($in) < 20) {
$sql = "select name, entry, displayid from item_template where name like '%{$in}%' LIMIT 10"; // the query
foreach ($dbo->query($sql) as $nt) {
//$msg.=$nt[name]."->$nt[id]<br>";
?>
<table style="table-layout:fixed;">
<tr>
<td>Name</td>
<td>Entry ID</td>
<td>Display ID</td>
</tr>
<tr>
<td align="center">
<?=$nt['name'];?>
</td>
<td><?=$nt['entry'];?></td>
<td>
<input type="button" class="button" value="<?=$nt['displayid'];?>">
</td>
</tr>
</table>
<?php
}
}
Javascript
$( document ).ready(function() {
var $theButtons = $(".button");
var $theinput = $("#theinput");
$theButtons.click(function() {
// $theinput is out of scope here unless you make it a global (remove 'var')
// Okay, not out of scope, but I feel it is confusing unless you're using this specific selector more than once or twice.
$("#theinput").val(jQuery(this).val());
});
});
Ok, here goes...
Use event delegation in your JavaScript to handle the button clicks. This will work for all present and future buttons
jQuery(function($) {
var $theInput = $('#theinput');
$(document).on('click', '.button', function() {
$theInput.val(this.value);
});
});
Less important but I have no idea why you're producing a complete table for each record. I'd structure it like this...
// snip
if (strlen($in)>0 and strlen($in) <20 ) :
// you really should be using a prepared statement
$sql="select name, entry, displayid from item_template where name like '%$in%' LIMIT 10";
?>
<table style="table-layout:fixed;">
<thead>
<tr>
<th>Name</th>
<th>Entry ID</th>
<th>Display ID</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbo->query($sql) as $nt) : ?>
<tr>
<td align="center">
<?= htmlspecialchars($nt['name']) ?>
</td>
<td><?= htmlspecialchars($nt['entry']) ?></td>
<td>
<button type="button" class="button" value="<?= htmlspecialchars($nt['displayid']) ?>"><?= htmlspecialchars($nt['displayid']) ?></button>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>
<?php endif;

how to print textbox value in php

In my code,when any text is entered into the textbox and click on add attribute button, entered value displayed on page for two times, one in first row of table and another one is in first row of second table. Now question is, when i entered text into another textbox which is in second row of second table, it should display the entered text.but it can't display. it is not working.
<script>
var i = 0;
document.getElementById('add-val').innerHTML='';
function insRow()
{
i++;
var x=document.getElementById('myTable').insertRow(-1)
var a=x.insertCell(-1)
var txt=document.getElementById('add-val').value;
a.innerHTML=txt;
// for <tr> of table
var row = document.getElementById("myRow");
var newrow=document.getElementById("myRow1");
var x = row.insertCell(-1);
var y = newrow.insertCell(-1);
x.innerHTML=txt; //+ '<br>' +
y.innerHTML='<input type="text" name="nm" />';
}
document.getElementById('add-val').innerHTML='';
</script>
& this is html code.
<form method="post" name="form">
<input type="text" name="attr" id="add-val"> <input type="button" onClick="insRow()" value="Add Attribute">
<table width="27" height="17" id="myTable"> </table>
<table cellpadding="13px">
<tr id="myRow"> </tr>
<tr id="myRow1"> </tr>
</table>
<input type="submit" value="Add option" onClick="insRow()"/>
<?php
if(isset($_POST['submit']))
{
$val= $_POST['add'];
echo $val;
}
?>
</form>
It should be
y.innerHTML='<input type="text" name="nm[]" />';
The []'s after nm
name="nm[]"
Serve to store all new generated fields into an array, which can then be accessed by $_POST
Which you then just access like so....
$val = $_POST['nm'];
foreach($val as $v){
echo $v; // display what user entered
}
// var_dump($val) will show you all the users seperate input for each field
HTML Code :
<form method="post" name="form">
<input type="text" name="attr" id="add-val"> <input type="button" onClick="insRow()" value="Add Attribute">
<table width="27" height="17" id="myTable"> </table>
<table cellpadding="13px">
<tr id="myRow"> </tr>
<tr id="myRow1"> </tr>
</table>
<input type="submit" value="Add option" onClick="insRow()"/>
<?php
if(isset($_POST['submit']))
{
$val= $_POST['nm'];
echo $val;
}
?>
</form>
put the name of input whos value you want to print in place of attr
$val= $_POST['attr'];

Categories