Develop Reference

Pass PHP variable with button to popup via javascript?

I have a table created dynamically with PHP to display requests. In each row of my table there is a button to open a popup. The ID of each request should be transferred to this popup in order to read out all data.
How can I make it so that in a dynamic table (all button names are the same) each button is differentiated, or recognized which button I pressed? And how can I pass the variable from PHP to the popup via javascript?
I would appreciate any help, I've been trying for days now, but I'm not getting any results.
Here's the table view
Popup window
<table id="meineTabelle" data-role="table" class="content"
data-mode="columntoggle" data-column-btn-text="Spalten">
<thead>
<div class="tablehead">
<tr>
<th class="thblackborder" data-priority=""></th>
<th class="thblackborder" data-priority="">1.Projektant</th>
<th class="thblackborder" data-priority=""></th>
<th class="thblackborder" data-priority="">2.Projektant</th>
<th class="thblackborder" data-priority=""></th>
<th class="thblackborder" data-priority="">3.Projektant</th>
<th class="thblackborder" data-priority=""></th>
<th class="thblackborder" data-priority="">4.Projektant</th>
<th class="thblackborder" data-priority=""></th>
<tr>
<th class="">ID</th>
<th class="">Vorname</th>
<th class="">Nachname</th>
<th class="">Vorname</th>
<th class="">Nachname</th>
<th class="">Vorname</th>
<th class="">Nachname</th>
<th class="">Vorname</th>
<th class="">Nachname</th>
<th class="">Titel</th>
<th class="">Standort</th>
<th class="">Klasse</th>
<th class="">Beginn</th>
<th class="">Abgabe</th>
<th class="">Beschreibung</th>
<th class="">Status</th>
<th class="">Erstellt</th>
</tr>
</tr>
</div>
</thead>
<tbody>
<?php
foreach ($Ausgabe as $row) {
?>
<form>
<tr onclick="dialogOeffnen('loslegen-dialog')">
<td>
<?php echo $row["ID"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname2"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname2"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname3"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname3"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname4"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname4"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Titel"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Standort"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Klasse"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Beginn"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Abgabe"] . "<br>"; ?>
</td>
<td>
<center>Link</center>
</td>
<td>
<?php echo $row["Genehmigt"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Erstellt"] . "<br>"; ?>
</td>
<td>
<input type="button" value="" onclick="">
</td>
</tr>
</form>
<?php
}
?>
</tbody>
</table>
Popup HTML
<div id="body-overlay"></div>
<div class="dialog" id="loslegen-dialog">
<a href="#" role="button" class="dialog-schließen-button" onclick="dialogSchliessen('loslegen-dialog')">
<i class="fas fa-times"></i>
</a>
<div class="textarea">
<h1><?php echo $row['ID'] ?></h1>
<textarea placeholder="Platz für Bemerkungen" name="Bemerkungen" id="" cols="30" rows="10"></textarea>
</div>
<form classaction="">
<div class="txt_field">
<input type="text" name="email" value="<?= $fetch_profile['email'];?>" required>
<span></span>
<label>E-Mail</label>
</div>
<div class="txt_field">
<input type="text" name="password" required>
<span></span>
<label>Passwort</label>
</div>
<input type="submit" value="Bestätigen" name="submit">
<div class="signup_link">
</form>
</div>
<script src="dialoge.js">
</script>
<script>
</script>
</body>
</html>
</body>
</html>
dialoge.js
function dialogOeffnen(dialogId) {
document.getElementById(dialogId).classList.add("sichtbar");
document.getElementById("body-overlay").classList.add("sichtbar");
}
function dialogSchliessen(dialogId) {
document.getElementById(dialogId).classList.remove("sichtbar");
document.getElementById("body-overlay").classList.remove("sichtbar");
}
If I echo out $row["ID"] for sure it shows me the last ID in my table

First, let's clean up your HTML a bit. Tables have predetermined structures. That means that a only some elements can be used as a parent or child. For example, you can't nest a <tr> inside a another <tr>. Learn about the basics of tables.
<table id="meineTabelle" data-role="table" class="content" data-mode="columntoggle" data-column-btn-text="Spalten">
<thead>
<tr>
<th>ID</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Titel</th>
<th>Standort</th>
<th>Klasse</th>
<th>Beginn</th>
<th>Abgabe</th>
<th>Beschreibung</th>
<th>Status</th>
<th>Erstellt</th>
</tr>
</thead>
<tbody>
<?php foreach ($Ausgabe as $row) : ?>
<tr>
<td><?= $row["ID"] ?></td>
<td><?= $row["Vorname"] ?></td>
<td><?= $row["Nachname"] ?></td>
<td><?= $row["Vorname2"] ?></td>
<td><?= $row["Nachname2"] ?></td>
<td><?= $row["Vorname3"] ?></td>
<td><?= $row["Nachname3"] ?></td>
<td><?= $row["Vorname4"] ?></td>
<td><?= $row["Nachname4"] ?></td>
<td><?= $row["Titel"] ?></td>
<td><?= $row["Standort"] ?></td>
<td><?= $row["Klasse"] ?></td>
<td><?= $row["Beginn"] ?></td>
<td><?= $row["Abgabe"] ?></td>
<td>Link</td>
<td><?= $row["Genehmigt"] ?></td>
<td><?= $row["Erstellt"] ?></td>
<td>
<button class="dialog-open" type="button" value="<?= $row["ID"] ?>">Button</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
I've changed your button to a <button> element because it's a bit more flexible to use. Output the ID of the row in the value attribute. Give the button a class value to identify it with. We'll need this for JS.
Select the table in JavaScript. Listen for click events that happen within the table. The code below checks if the clicked element (event.target) is a button with the class we gave it. If it is, then we'll read the value from button and pass it to the open modal function.
const table = document.querySelector('#meinTabelle');
table.addEventListener('click', event => {
if (event.target.matches('.dialog-open') {
const dialogId = event.target.value;
dialogOeffnen(dialogId);
}
});
function dialogOeffnen(dialogId) {
document.getElementById(dialogId).classList.add("sichtbar");
document.getElementById("body-overlay").classList.add("sichtbar");
}

creating datatable for php codes with bootstrap 4

hello i created a datatabe to to load my datas sort them and using the search functionality but it dose not work i tried it been 5 days and i am stuck here i do not know what i am missing or what i done wrong this is my codes if any one can help me i would be thankful
<div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">
<thead style="color:black;" >
<th>id</th>
<th>Product</th>
<th>Price</th>
<th>Weight</th>
<th>Image</th>
<th>Type</th>
<th>Type 2</th>
</thead>
<?php
$get = mysqli_query($conn,"SELECT * FROM products;");
?>
<tbody>
<?php
while ($row=mysqli_fetch_array($get)) {
$id=$row['product_id'];
$name=$row['product_name'];
$type2=$row['product_type'];
$weight=$row['weight'];
$price=$row['product_price'];
$type=$row['type'];
$img=$row['img'];
$get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<td><?php echo $id;?></td>
<td><?php echo $name;?></td>
<td>$<?php echo $newprice;?></td>
<td><?php echo $weight;?> g</td>
<td>
<img src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
</td>
<td><?php echo $type;?></td>
<td><?php echo $type2;?></td>
</tbody>
<?php
endwhile;
}
?>
</div>
</table>
these are my bootstrap and scripts that i use
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
also this is my data table code
<script type="text/javascript">
$(document).ready(function() {
$('#datas').dataTable( { "ordering": true } );
} );
</script>
the datatable is created but it does not work like the search or the sorting this is picture of what it likes
i am using bootstrap 4

You are missing <tr> both on your <thead> and <tbody>
<thead style="color:black;">
<th>Product</th>
</thead>
should be:
<thead style="color:black;">
<tr>
<th>Product</th>
<tr>
</thead>
and inside you tbody while:
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<tr>
<td>...</td>
</tr>
<?php endwhile; ?>
You're also closing your </tbody> on every while loop:
</tbody>
<?php
endwhile;
?>
</div> //where are you opening this div? Seems it should not be here
</table>
change to:
<?php endwhile; ?>
</tbody>
</table>
This changes should make your DataTable work as expected.

Malformed html, loops wrong, missing tr tag, etc. Should be something like this.
<div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">
<thead style="color:black;" >
<th>id</th>
<th>Product</th>
<th>Price</th>
<th>Weight</th>
<th>Image</th>
<th>Type</th>
<th>Type 2</th>
</thead>
<?php
$get = mysqli_query($conn,"SELECT * FROM products;");
?>
<tbody>
<?php
while ($row=mysqli_fetch_array($get)) {
$id=$row['product_id'];
$name=$row['product_name'];
$type2=$row['product_type'];
$weight=$row['weight'];
$price=$row['product_price'];
$type=$row['type'];
$img=$row['img'];
$get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<tr>
<td><?php echo $id;?></td>
<td><?php echo $name;?></td>
<td>$<?php echo $newprice;?></td>
<td><?php echo $weight;?> g</td>
<td>
<img src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
</td>
<td><?php echo $type;?></td>
<td><?php echo $type2;?></td>
</tr>
?>
<?php endwhile; ?>
<?php } ?>
</tbody>
</table>
</div>

how to properly use DATATABLE

<table id="tbl" class = "table table-striped table-bordered" style="border-top:0px;">
<thead>
<tr>
<th></th>
<th><p style="text-align:center;">Answered</p></th>
<th><p style="text-align:center;">Post</p></th>
<th><p style="text-align:center;">Views</p></th>
</tr>
</thead>
<tbody>
<?php
$res = $db->viewquestion();
$ask_id= '';
foreach ($res as $key => $value) {
$ask_id = $value['iask_id'];
?>
<tr>
<td>
<div align="left" width="400">
<?php echo '<a href="askpriest?iask_title='.$value['iask_title'].'">'?>
<img src="./<?php echo $value['image']; ?>" style="border-radius:50%;float:left" width="20%" height="20%" class="pull-left">
<h5><strong class="font-1-2" style="color:#59960b;border-radius:50%;float:left"><?php echo $value['iask_title']?></strong></h5>
<br><p class="font-1-2" style="color:#000000;border-radius:50%;font-size:12px;float:left">by:<?php echo $value['firstname'].' '.$value['lastname'].' '. $value['date_send'].'<br> in '.$value['iask_topic'] ?> </p>
</a>
</div>
</td>
<td>
<?php
if($value['iask_answered']==1){
?>
<p align="center" style="padding-top:20px;"><span class="fa fa-check" style="color:#59960b;"></span></p>
<?php
}else{
?>
<p align="center" style="padding-top:20px;font-size:30px;"><span style="color:#59960b;"></span></p>
<?php
}
?>
</td>
<td>
<p class="font-1-5" style="padding-top:25px;text-align:center;" width="80"><?php echo $value['iask_post']?></p>
</td>
<td>
<p class="font-1-5" style="padding-top:25px;text-align:center;"><?php echo $value['iask_view']?> </p>
</td>
</div>
</tr>
<?php
}
?>
</tbody>
</table>
so i have this table and im trying to use the datatable js..
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" //code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tbl').DataTable();
});
</script>
but unfortunately nothing happens on the table.. i tried searching on web and they said that the and should be equal.. so i tried to count how many is the and and they are equal.. i dont have any idea how to fix this since the only answer i get was to and should be equal.. hel

Your table has the id equal with "tbl" so the code should be
$(document).ready(function() {
$('#tbl').DataTable();
});

You can use jquery data-table like:
html:
<table id="data_table">
<thead>
<tr>
<th>Emp Code</th>
<th>First Name</th>
<th>Last Name</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<!-- Dynamic Body -->
</tbody>
</table>
Jquery:
$(document).ready(function() {
var data = [];
data.push(
[1,"Sasha","Brenna","0800 1111"],
[2,"Sage","Mia","(01012) 405872"],
[3,"Chelsea","Allistair","076 0578 0265"],
[4,"Uta","Savannah","070 1247 5884"],
[5,"Remedios","Berk","0995 181 0007"],
[6,"Ruby","Wayne","0800 1111"],
[7,"Faith","Fredericka","(01709) 099879"],
[8,"Myra","Harrison","070 4241 9576"],
[9,"Drake","Miriam","0800 733635"],
[10,"Reed","Shannon","076 8597 5067"]
);
$('#data_table').DataTable( {
data: data,
});
});
Working Fiddle

Show custom prompbox html and pass result to php

I have created a table where it displays the list of users. Every user has a message button. on click of message button, I want to show a custom prompt box where user will be able to type a message. On click of submit, typed message will be sent to php page.
<div style="overflow: auto;height: 400px; width: 100%;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>Id</th>
<th>Package</th>
<th>Date</th>
<th>Referring Agent</th>
<th>Action</th>
</tr>
<?php if(!empty($records)){
foreach($records as $k=>$v){
?>
<tr>
<td><?php echo $v['id']; ?></td>
<td><h3><?php echo $v['package']; ?></h3></td>
<td><?php echo $v['submit_date']; ?></td>
<td><?php echo $v['agent']; ?></td>
<td>
<div class="pagging">
Message
</div>
</td>
</tr>
<?php
}
}else{
?>
<tr>
<td colspan="5" align='center'><?php echo "No record added yet"; ?>
</tr>
<?php
}
?>
<!--<tr class="odd">
<td>2</td>
<td><h3>Lorem ipsum dolor sit amet, consectetur.</h3></td>
<td>12.05.09</td>
<td>Administrator</td>
<td>
<div class="pagging">
Send Notification
</div>
</td>`enter code here`
</tr>-->
</table>
</div>
in php i am getting the id by this way and here I want the message typed as well. Kindly help
if (isset($_GET['id'])){
$id=$_GET['id'];
}

A quick example how to make one:
<input type="button" value="Show" onClick="showDiv()">
This is button that will trigger event (show div).
<div id="someDiv" style="display: none">
<form action="file.php" method="POST">
<textarea name="textArea" rows="4" cols="20"></textarea><br>
<input type="submit" name="submit" value="Submit message">
</form>
</div>
This is your custom prompt (message).
<script>
function showDiv()
{
var div = document.getElementById('someDiv');
if (div)
div.style.display = 'inherit';
}
</script>
This is JavaScript function that displays your custom prompt.
What you need to do is add onClick event to button and insert somewhere JavaScript function (better in separate JS file) and hide your prompt in the same HTML document.
Hope that helps!

Update MySQL data from HTML using Javascript

I'm a beginner in HTML, PHP, JavaScript and MySQL. I've written a HTML code to enter data into a simple table containing columns "Name" and "Email" in MySQL by employing a seperate PHP file. Then I tried fetching the table contents using PHP. But now I need a little help in updating the data. My code is as follows:
enter code here<!DOCTYPE html>
<html>
<script language="javascript" src="update.js"></script>
<?php
$a=mysqli_connect("localhost","root","","test4");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($a,"select * FROM test");
?>
<table border="1" cellspacing="1" cellpadding"1">
<tr>
<th>pkid</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<?php
for ($i=0; $i<mysqli_num_rows($result); $i++)
{
$row = mysqli_fetch_array($result)
?>
<tr>
<td id="pkid"><?php echo $row['pkid'] ?></td>
<td id="name"><?php echo $row['name'] ?></td>
<td id="email"><?php echo $row['email'] ?></td>
<td><input type=submit onclick="myfunc()" value="View"/></td>
</tr>
<?php
}
?>
</table>
<form action="insert.php" method="post">
<table border="2">
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>
<input type="submit" value="Add">
</tr>
</table>
</form>
</html>
<?php
mysqli_close($a);
?>

Here is the Code for Update Data to MYSQL :
Html File :
<title>Listing Details for Update</title>
<?php
include ('config.php');
$tbl_name="user"; // Table name
$sql="SELECT * FROM $tbl_name";
$result=mysql_query($sql);
?>
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>
<table width="400" border="1" cellspacing="0" cellpadding="3">
<tr>
<td colspan="4"><strong>List data from mysql </strong> </td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center"><strong>pkid</strong></td>
<td align="center"><strong>Name</strong></td>
<td align="center"><strong>Email-Id</strong></td>
<td align="center"><strong>Action</strong></td>
</tr>
<?php
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><? echo $rows['pkid']; ?></td>
<td><? echo $rows['name']; ?></td>
<td><? echo $rows['email']; ?></td>
<td align="center">update</td>
</tr>
<?php
}
?>
</table>
</td>
</tr>
</table>
<?php
mysql_close();
?>
Here you can find the way for Update Single Field, Multiple Field Etc.,
http://php.sysaxiom.com/update_data.php
http://php.sysaxiom.com/update_multiple_data.php

If you need to change the contents of the table to have different rows/row data, (and you want to do it live) you will need to use AJAX. jQuery has fairly straightforward ajax usage, so for actual implementation, I would look to that. You'll also need another PHP file that just returns the raw HTML required to fill in the table. Pseudocode (jquery) below:
$.post("url","dataToPost",function(data){$("#table id where I want to put new data).innerHTML=data});
Basically, the $.post() posts the dataToPost to the url and sets the innerHTML of whatever you select to the resultant data.