We Keep Coding

My JavaScript pop up modal only works on the first row

First question: I have a dynamic table, with edit icon on every row, when pressing the icon a popup modal should show up. But the popup modal only work on the first row. I tried to determine the problem and I think it’s because of the id "open5", that it’s duplicated and only work for one row which is the first row. How can I make it appear on every row?
Second question: how can I use the book id to determine which book going to be updated, when the user press the button on the update modal?
trackingPage.php
<!-- dynamic table -->
<div class="container">
<table class="_table">
<thead>
<tr>
<th>الغلاف</th>
<th>العنوان</th>
<th>المؤلف</th>
<th>تاريخ البدء</th>
<th>تاريخ الإنتهاء</th>
<th>التقدم</th>
<th width="50px">
</th>
</tr>
</thead>
<tbody id="table_body">
<?php
$query = "SELECT * FROM `tracking` WHERE `username_tracking`='$_SESSION[username]'";
$result = mysqli_query($con, $query);
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<td><img style='width:80px; height: 85px; border-radius: 10px; margin: 0.1px;' src="upload/<?php echo $row['cover'] ?>"></td>
<td><?php echo $row["book_name"] ?></td>
<td><?php echo $row["author_name"] ?></td>
<td><?php echo $row["start_date"] ?></td>
<td><?php echo $row["end_date"] ?></td>
<td>
<div class='progress-container'><progress value='<?php echo $row["current_page"] ?>' max='<?php echo $row["page_number"] ?>'></progress></div>
</td>
<td>
<div class='action_container'>
<a href='delete_book.php?book_id=" <?php echo $row["book_id"] ?> "' class='danger' onclick='remove_tr(this)'><i class='fa fa-close'></i></a>
<a class='success' id='open5'>
<i class='fa fa-plus'></i>
</a>
</div>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<div class="modal-container-tracking" id="modal_container5">
<div class="modal-tracking">
<form class="book-form" method="post" action="trackingPage.php" enctype="multipart/form-data">
<!-- Modal content -->
<div class="closeIcon-tracking" id="close5">
<span class="close-tracking">×</span>
</div>
<div class="modalContent-tracking">
<h3>تحديثات الكتاب</h3>
<input type="number" name="current_page" placeholder="عدد الصفحات المقروءة" class="pages" min='1' required />
<input name="end_date" placeholder='تاريخ الانتهاء' type="date" class="start-date" required />
<textarea class="review" name="review" placeholder="مراجعة الكتاب"></textarea>
<button href="" name="update_book" class="bn60" style="text-decoration: none;">حدِّث الكتاب</button>
</div>
</form>
</div>
</div>
<script>
//Popup page
const open5 = document.getElementById('open5');
const modal_container5 = document.getElementById('modal_container5');
const close5 = document.getElementById('close5');
open5.addEventListener('click', () => {
modal_container5.classList.add('show');
});
close5.addEventListener('click', () => {
modal_container5.classList.remove('show');
});
//end of Popup page
</script>
This is my DB:
Users table
Tracking table

Your JavaScript code is looking for an element with the ID open5, HTML id's should be unique, but your PHP code renders an element with the same ID for every row, ergo the JS code is satisfied when it finds the first element with ID open5 and therefore all subsequent ones do not get event listeners attached. You have to switch to a class and then attach a listener to each of those links, e.g. something like this:
document.querySelectorAll('tr .success').forEach(function(el, i, nodeList) {
el.addEventListener('click', () => {
modal_container5.classList.add('show');
});
}

looping through a table and storing a particular cell in an array if row is checked

I currently have a table that is triggered by a drop down. Inside the table, there's a checkbox. When the check box is checked and the user clicks on the confirm button, the code should loop through the table and get the email values of all the checked rows and store them in an array. So far, it can check if the rows are checked. I've found a few ways online but its not working. Here's the table:
<?php if ($picked != null){ ;
foreach ($picked as $rows): ?>
echo base_url(); ?>employer/view/send/<?php echo $rows['username']; ?>-->
<!--form action="" method="POST"-->
<?php endforeach; ?>
<table id="view_add"
class="table dataTable table-striped table-dynamic table-hover _tm">
<thead>
<tr>
<th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
style="width: 250px;">
Applicant Name
</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1"
style="width: 200px;">
Employer
</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1"
style="width: 200px;">
Post Header
</th>
<th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
style="width: 450px;">
Description
</th>
<th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
style="width: 100px;">
VIEW CV
</th>
<th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
style="width: 100px;">
</th>
</tr>
</thead>
<tbody>
<?php foreach ($picked as $rows): ?>
<tr>
<td><?php echo $rows['applicantName']; ?></td>
<td><?php echo $rows['employerName']; ?></td>
<td><?php echo $rows['postingName']; ?></td>
<td><?php echo $rows['postDescription']; ?></td>
<td style="display: none;"><?php echo $rows['email']; ?></td>
<td><a id="stress" data-toggle="modal" href="#editButton"
data-full="<?php echo $rows['fullName']; ?>"
data-school="<?php echo $rows['institution']; ?>"
data-state="<?php echo $rows['state']; ?>"
data-location="<?php echo $rows['location']; ?>"
data-dob="<?php echo $rows['dob']; ?>" data-skill="<?php echo $rows['skills']; ?>"
data-sex="<?php echo $rows['sex']; ?>" data-gpa="<?php echo $rows['cgpa']; ?>"
data-call="<?php echo $rows['phone']; ?>"
data-like="<?php echo $rows['favoured']; ?>"
data-award="<?php echo $rows['awards']; ?>"
data-interest="<?php echo $rows['interests']; ?>" class="myeditButton"
>view</a></td>
<td>
<label class="switch m-r-40">
<input type="checkbox" class="switch-input"
id="<?php echo $rows['applicationKey']?>"
data-mail="<?php echo $rows['email']; ?>"
data-confirm="<?php echo $rows['applicationId']; ?>"
id="check" name="check" <?php echo $rows['status'] ? 'checked':''; ?> >
<span class="switch-label" data-on="yes" data-off="no"></span>
<span class="switch-handle"></span>
</label>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="form-group">
<input type="submit" value="Confirm" id="mail" class="btn btn-primary mail">
</div>
<!--/form-->
<?php }else{ ;?>
<div class="alert alert-warning">
<h4>There are no current Applicants for this post.</h4>
</div>'
<?php } ;?>
Here's the little script I've used:
<script>
$(document).on("click", "#mail", function () //<-small mistake here
{
var mail_list = [];
$( 'input[type=checkbox]:checked' ).each(
function(){
var mail = $(this).data("mail");
mail_list.push(mail);
var emailers = mail_list.join(",");
//SEND TO PHP
$.ajax({
type: 'post',
url: '<?php echo base_url(); ?>employer/view/send',
data: {
chosen: emailers
},
success: function( data ) {
console.log( data );
}
});
//the END
}
)
});
</script>
My JS isn't so good.
Lastly, heres the php end
else if ($param1 == 'send')
{
$src1= $_POST['chosen'];
$array = explode(",", $src1);
print_r($array);

First, you should add a way to "find" the email value of a row. So edit the html with something like that :
<td style="display: none;" class="email-value">
<?php echo $rows['email']; ?>
</td>
Now, I think there is a small error in your code, an html id is targetable by # and a class by a .. So with my changement I propose :
$(document).on("click", "#mail", function () //<-small mistake here
{
var mail_list = [];
$( 'input[type=checkbox]:checked' ).each(
function(){
var mail = $(this).parents("tr").find(".email-value").text();
//this line search the "tr" parent of each input checkbox that's checked,
//and then finds the child "email" value of it.
mail_list.push(mail);
}
)
})
Alter solution
Add the email in data parameters of the checkbox
<input type="checkbox" class="switch-input"
id="<?php echo $rows['applicationKey']?>"
data-mail="<?php echo $rows['email']; ?>"
data-confirm="<?php echo $rows['applicationId']; ?>"
data-email="<?= $rows['email']"
id="check" name="check" <?php echo $rows['status'] ? 'checked':''; ?> >
Then, the javascript become quite simple :
$(document).on("click", "#mail", function () //<-small mistake here
{
var mail_list = [];
$( 'input[type=checkbox]:checked' ).each(
function(){
var mail = $(this).data("email");
mail_list.push(mail);
//the END
}
)
})
update : oops, it's parents*, parent can't go upper than one level...
update2 : Add an alternative version, simplified

<script type="text/javascript">
$(document).on("click", ".mail", function ()
{
var emailList = [];
var selectedRows = $( 'table._tm' ).find( 'tbody' ) // select table body and
.find( 'tr' ) // select all rows that has
.has( 'input[type=checkbox]:checked' ) // checked checkbox element
selectedRows.each(function(idx, elem) {
var email = jQuery(elem).find('input[type="checkbox"]').data("mail");
emailList.push(email);
});
console.log( 'elem:', emailList );
} );

This should be quite easy try something like this:
var emailList = [];
selectedRows.forEach(function(idx, elem) {
var email = jQuery(elem).data("mail");
emailList.push(email);
});

how to insert data into a dynamically created row in a table (html) from database using php and mysqli

i have a database filled with records. im trying to fetch that data and show it in a table which is dynamically created when search a particular name.
my html code is
<form class="formm" method="POST" action="">
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
<input type="text" name="name" id="nameee" placeholder="Name" />
</div>
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
<input type="text" name="vNum" id="vNum" placeholder="Voucher Number" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="7" />
</div>
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
<input type="text" name="cnic" id="cnic" placeholder="CNIC Number - (4444455555556)" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="13" />
</div>
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
<input type="submit" class="submit" value="button" name="search" id="search" onclick="myFunction()">
</div>
</form>
<div class="row" id="tableDiv">
<div class="col-lg-12">
<table id="Resulttable" class="table table-hover table-mc-light-blue">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Voucher Number</th>
<th>Cnic Number</th>
<th>Phone Number</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
my php code is
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "dany";
$rowc_name;
$rowc_id;
$rowc_cnic;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT c_name, c_cnic, c_id FROM customer";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$rowc_name = $row["c_name"];
$rowc_id = $row["c_id"];
$rowc_cnic = $row["c_cnic"];
echo "<br> id: ". $row["c_id"]. " - Name: ". $row["c_name"]. " " . $row["c_cnic"] . "<br>";
}
} else {
echo "0 results";
}
$conn->close();
?>
this code fetches the data and displays it as is on the page on the upper left corner.
the problem is:
im unable to load it on the table cells.
i cannot write a javascript function which on clicking the "search button on my form" inserts this information on the table.
im guessing a javascript function, which triggers when the search button is clicked, fetches an entry from the database according to the value entered in the textbox, and displays it on the table.
keep in mind that there can be multiple entries in the database with the same name.

You must use ajax to do this. It's very easy if you use jQuery to do this. For example a simple code you can run:
$("button").click(function(){
$.ajax({url: "yourphpcode.php", success: function(result){
// You can do your work with result
}});
});
You can see more example from here

You have to use while loop inside table to show data inside your table like this :
<table>
<thead>
<tr>
<th>Name</th>
<th>id</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
//use your while loop here //
while($row = mysqli_fetch_assoc($varname){
//close your php tag because table is a html element//
?>
<td>Name</td>
<td>id</td>
<td>password</td>
</tr>
</tbody>
//start your php and end while loop end bracket//
<?php } ?>
This code will show all your database data in a table in proper format. If you have another PHP page, include that PHP to current table page.

jquery load data break modal

I have more and more problems :(
I try get a php table witch i use datatable.js for it to reload data without refresh page.
Data was load true jq with load:
$(document).ready(function () {
data_th1();
//data tablice
function data_th1(){
setInterval(function () {
$('#tablica_home_1').load('ajax/data.php')
});
}
});
And data is loaded and i can refresh it with function data_th1() BUT when data was loaded i have one + button for open modal to add some coments, ehh problem was that modal after load data true jq not work?
HTML CODE WHEN DATA WAS LOAD (index.php)
<div id="tablica_home_1"></div>
SCRIPT IN INDEX.PHP FOR LOAD
<script>
$(document).ready(function () {
data_th1();
//data tablice
function data_th1(){
setInterval(function () {
$('#tablica_home_1').load('ajax/data.php')
});
}
});
</script>
DATA.PHP
<?php
require_once("../includes/inc_files.php");
//tablica poziva
$sql7 = "SELECT * FROM svi_pozivi WHERE calltype='Outbound' AND status = 'NO ANSWER' OR calltype='Inbound' AND status = 'NO ANSWER' ORDER BY datum DESC";
$result7 = $database->query($sql7);
?>
<table id="example" class="display responsive-table datatable-example">
<thead>
<tr style="text-transform: uppercase;">
<th>ID</th>
<th>Pozivatelj</th>
<th>Primatelj</th>
<th>Datum</th>
<th>Status poziva</th>
<th>Komentar</th>
<th>Obrada</th>
<th>Funkcije</th>
</tr>
</thead>
<tbody>
<?php while ($row7 = $database->fetch_array($result7)){ ?>
<tr>
<td><?php echo $row7['id']; ?></td>
<td>
<?php
if ($row7['calltype'] == 'Outbound'){
echo $row7['src'];
}
else{
echo realbroj_ul($row7['src']);
echo ' <a href="index.php?stranica=imenik-add&broj=realbroj_iz($row7["dst"])" alt="Dodaj u imenik"><i class="material-icons" style="margin-top: -4px;position: absolute;color: blue;margin-left: 5px;">add_circle</i>';
}
?></td>
<td>
<?php
if ($row7['calltype'] == 'Outbound'){
echo realbroj_iz($row7['dst']);
echo '<a href="index.php?stranica=imenik-add&broj=realbroj_iz($row7["dst"])" alt="Dodaj u imenik"><i class="material-icons" style="margin-top: -4px;position: absolute;color: blue;margin-left: 5px;">add_circle</i>';
}
else{
echo $row7['dst'];
}
?></td>
<td><?php echo realdatum($row7['datum']); ?></td>
<td><?php echo realstatus($row7['status']); ?></td>
<td>
<?php
//komentar
$sql8 = "SELECT * FROM komentari WHERE call_id = '$row7[id]'";
$result8 = $database->query($sql8);
$row8 = $database->fetch_array($result8);
if ($row8['id'] != ''){
echo $row8['komentar'];
}
else{
echo 'Nema komentara';
echo '<a data-toggle="modal" class="modal-trigger" data-id="'.$row7["id"].'" href="#komentarM" alt="Kreiraj Komentar"><i class="material-icons" style="margin-top: -4px;position: absolute;color: blue;margin-left: 5px;">add_circle</i>';
}
?></td>
<td><?php echo statuskomentara($row7['k_status']);?></td>
<td>7</td>
</tr>
<?php } ?>
</tbody>
</table>
AND MODAL IN INDEX.PHP
<div id="komentarM" class="modal bottom-sheet">
<div class="modal-content">
<h4>KOMENTAR</h4>
<p>Dodajte svoj komentar</p>
</div>
<form id="koment_post">
<input type="hidden" name="id" value="">
<input type="hidden" name="agent" value="<?php echo $ime2; ?>">
<input style="width=80%;" type="text" name="komentar" placeholder="Unesite Vaš komentar...">
<div class="modal-footer">
<button type="submit" class=" modal-action modal-close waves-effect waves-green btn-flat">SPREMI</button>
</div>
</form>
</div>
ONE AGAIN: I have in data.php table with modal call a href, but when i call data.php with jq laod function modal was not work. I need to fix that modal show,

I am not using modal with ajax load, i am searching a lot of site and this problem was not solved.

Maybe i'm too late, but, just in case for you or another person who may want to know how to fix this:
The explanation for this, it's in here
I've used the element BODY to access my element, like this:
$('body').on('click', '.Class',function () {});
$('body').on('click', '#Id',function () {});
This are a few examples, but it worked for me. I hope it'll help u.

PHP - Notice: Undefined index: and not displaying data

this is code of search.php. i want to take search by date from the input box as below.
<form action="visitor-print.php">
<div class="col-sm-3 text-center"><h3>Date</h3>
<input type="text" class="form-control" name="dat" placeholder="Enter Date">
<p class="help-block">Month Format 1,2,3,....29,30..</p>
<button class="btn btn-default"><span>Submit</span></button>
</div>
</form>
this is my visitor-print.php code where i get undefined index error on dat (which is from the other page)
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db('visitor_list');
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
$sql = "SELECT * FROM list1 WHERE d1 = '". $_POST["dat"] . "' ";
$retval = mysql_query( $sql,$conn ) or die("Error: ".mysql_error($conn));
?>
<div class="container">
<h3 class="text-center">User Feed-Back Details</h3><br />
<div class="table-responsive" id="employee_table">
<table class="table table-bordered">
<tr>
<th width="10%">Visitor Name</th>
<th width="10%">Address</th>
<th width="10%">Area to Visit</th>
<th width="10%">Phone No.</th>
<th width="20%">Want to meet with </th>
<th width="50%">Purpose of meeting</th>
</tr>
<?php
while($row = mysql_fetch_array($retval,MYSQLI_BOTH))
{
?>
<tr>
<td><?php echo $row['nm']; ?></td>
<td><?php echo $row['add1']; ?></td>
<td><?php echo $row['area_vis']; ?></td>
<td><?php echo $row['y1']; ?></td>
<td><?php echo $row['app_ty']; ?></td>
<td><?php echo $row['no_per']; ?></td>
</tr>
<?php
}
?>
</table>
</div>
<div align="center">
<button name="create_excel" id="create_excel" class="btn btn-success">Create Excel File</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#create_excel').click(function(){
var excel_data = $('#employee_table').html();
var page = "excel.php?data=" + excel_data;
window.location = page;
});
});
</script>
Problem:
Notice: Undefined index: dat in D:\wamp\www\radissun visitor\visitor-print.php on line 12
and is not showing data from mysql

The answer you are looking for: You are using $_POST - which is just for forms which have method="post". Default method is GET - so your variables are $_GET[]. You can either set the method parameter in the html to POST, or you change your PHP code to GET.
But I must point out, that your code is not usable for productive environments, as it is vulnerable to SQL Injection. See http://www.w3schools.com/sql/sql_injection.asp

MISSING METHOD ON FORM METHOD="POST"
NOTE: IF YOU USE METHOD="POST" YOU CAN GET VALUE BY $_POST['dat']; IF YOUR NOT USING METHOD ATTRIBUTE .FORM JUST SUBMITED AS GET METHOD YOU CAN GET BY $_GET['dat'];
<form action="visitor-print.php" METHOD="POST" >
MISSING FORM SUBMIT
<INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT" >
(OR)
ADD TYPE="SUBMIT" TO BUTTON
<button TYPE="SUBMIT" class="btn btn-default"><span>Submit</span></button>