I have a table with data that is being pulled from a database and I am trying to add a button to where it will load more data but when I click on it no data comes up. I am new to coding so I don't have that much experience.
This is the main page
Index.php
<?php
include 'database.php'; // MySQL Connection
$query = "SELECT * FROM Clever_Students";
$result = mysqli_query($conn, $query);
?>
<body>
<br /><br />
<div class="container">
<br />
<div class="table-responsive">
<br />
<h4 align="center">Student Data Management</h4>
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th width="20%" class="text-center">View Student Details</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["First_name"]; ?></td>
<td><?php echo $row["Last_Name"]; ?></td>
<td><input type="button" name="view" value="view" id="<?php echo $row["Student_id"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>
<!-- Employee Details -->
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Student Details</h4>
</div>
<div class="modal-body" id="student_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var Student_id = $(this).attr("Student_id");
$.ajax({
url:"select.php",
method:"post",
data:{Student_id:Student_id},
success:function(data){
$('#student_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
</body>
This where the modal should be pulling the data from.
select.php
<?php
if (isset($_POST["Student_id"])) {
$output = '';
include 'database.php'; // MySQL Connection
$query = "SELECT * FROM Clever_Students WHERE Student_id = '" . $_POST["Student_id"] . "'";
$result = mysqli_query($conn, $query);
$output .= '
<div class="table-responsive">
<table class="table table-striped">';
while ($row = mysqli_fetch_array($result)) {
$output .= '
<tr>
<td width="30%"><label>First Name</label></td>
<td width="70%">' . $row["First_name"] . '</td>
</tr>
<tr>
<td width="30%"><label>Last Name</label></td>
<td width="70%">' . $row["Last_Name"] . '</td>
</tr>
<tr>
<td width="30%"><label>Gender</label></td>
<td width="70%">' . $row["Gender"] . '</td>
</tr>
<tr>
<td width="30%"><label>School ID</label></td>
<td width="70%">' . $row["School_id"] . '</td>
</tr>
';
}
$output .= "</table></div>";
echo $output;
}
?>
I have added the code above. Anything will help.
Related
I am trying to assign multiple users to the check rows but I seem to be stuck, hope you guys can help me with this.
I have created the table with checkbox and modal seems to connect to the database, however for the assign and checked data going to modal, I seem to be stuck
<SCRIPT language="javascript">
$(function () {
$("#checkAll").click(function () {
$('.checkedcheck').attr('checked', this.checked);
});
});
</SCRIPT>
<?php
global $wpdb;
$tablename = "tca_lead_que";
$tablenameuser = "iid_users";
?>
<h1 style="text-align: center; padding-top: 15px; padding-bottom: 10px;">Lead Que</h1>
<div><label><h3>Assign Lead que to user</h3></label></div>
<div><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal_form">Assign Leads</button></div>
<hr style="padding-bottom: 20px;">
<script>
$(document).ready(function(){
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
});
</script>
<div style="padding-right: 3%">
<table id="tc_form_data_table" width='100%'>
<thead>
<tr>
<th><input type="checkbox" onClick="toggle(this)" id="checkAll" name="checkAll" /></th>
<th>que_id</th>
<th>Business Name</th>
<th>Phone Number</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip Code</th>
<th>Email (If Applicable)</th>
<th>Contact Name</th>
<th>Marketer Email</th>
<th>Lead Status</th>
</tr>
</thead>
<tbody>
<?php
$entriesList = $wpdb->get_results("SELECT * FROM ".$tablename." where is_active = 1 order by submitted_time desc");
if(count($entriesList) > 0){
$count = 1;
foreach($entriesList as $entry){
$que_id = $entry->que_id;
$business_name = $entry->business_name;
$phone_number = $entry->phone_number;
$address = $entry->address;
$city = $entry->city;
$state = $entry->state;
$zipcode = $entry->zipcode;
$email = $entry->email;
$contact_name = $entry->contact_name;
$marketer_email = $entry->marketer_email;
$lead_status = $entry->lead_status;
// echo "<script>console.log('".$name."')</script>";
echo "<tr>
<td><input type='checkbox' class='checkedcheck' name='lead_id[]' value='".$row['que_id']."'></td>
<td>".$que_id."</td>
<td>".$business_name."</td>
<td>".$phone_number."</td>
<td>".$address."</td>
<td>".$city."</td>
<td>".$state."</td>
<td>".$zipcode."</td>
<td>".$email."</td>
<td>".$contact_name."</td>
<td>".$marketer_email."</td>
<td>".$lead_status."</td>
</tr>
";
$count++;
}
}else{
echo "<tr><td colspan='5'>No active que</td></tr>";
}
?>
</tbody>
</table>
</div>
<div id="modal_form" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Assign Lead que to user</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table id="tc_form_data_table" width='100%'>
<thead>
<tr>
<th></th>
<th>Username</th>
<th>Marketer Email</th>
</tr>
</thead>
<tbody>
<?php
$entriesList = $wpdb->get_results("SELECT * FROM ".$tablenameuser."");
if(count($entriesList) > 0){
$count = 1;
foreach($entriesList as $entry){
$ID = $entry->ID;
$user_nicename = $entry->user_nicename;
$user_email = $entry->user_email;
// echo "<script>console.log('".$name."')</script>";
echo "<tr>
<td><input type='radio' name='ID[]' value='".$row['ID']."'></td>
<td>".$user_nicename."</td>
<td>".$user_email."</td>
</tr>
";
$count++;
}
}else{
echo "<tr><td colspan='5'>No active que</td></tr>";
}
?>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" id="btnUpdateleadque" class="btn btn-info btn-sm">Assign</button>
<button type="button" class="btn btn-info btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is all in 1 php, I'm using this as a custom plugin on wordpress.
I'm new to php and I'm trying to make a theatrical school management app.
I have a section that I create a table with all students of a project and I want every row in the table to have a button that opens a modal with all project weeks and a checkbox to check those that payed the weekly cost.
I tried to make it work with the code bellow but only the last record opens the modal. The previews records doesn't do anything. If I add another record in the table only the new record opens the modal. Please help!
My code:
<tbody id="firstClass">
<?php
if( mysqli_num_rows($result) > 0){
// we have data
// output the data
while( $row = mysqli_fetch_assoc($result) ) {
$id = $row["id"];
/* print_r($id); */
echo "<tr>";
echo "<td>" . $row['id'] . "</td><td>" . $row['firstname'] . "</td><td>" . $row['lastname'] . "</td><td>" . $row['Age'] . "</td><td>" . $row['email'] . "</td><td>" . $row['phone'] . "</td><td>" . $row['sign_date'] ."</td>";
echo '<td><button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#payments-' . $id . '">
<i class="fas fa-euro-sign"></i>
</button></td>';
echo '<td><a href="edit_student.php?id=' . $row['id'] .'" type="button" class="btn btn-primary btn-sm">
<i class="far fa-edit"></i>
</a></td>';
echo '<td><a href="delete_student.php?id=' . $row['id'] .'" type="button" class="btn btn-danger btn-sm delete">
<i class="fas fa-trash-alt"></i>
</a></td>';
echo "</tr>";
}
} else {// if no entries
echo "<div class='alert alert-warning'>Δεν έχετε εγγραφές!</div>";
}
// mysqli_close($conn);
?>
<tr>
<td colspan="11"><div class="text-center"><i class="fas fa-plus"></i> Προσθήκη εγγραφής</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="payments-<?php echo $id; ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Πληρωμή</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- <?php echo $id ;?> -->
<div class="table-responsive">
<table class="table" id='myTable'>
<thead>
<tr>
<th class="table-cell text-center" scope="col">Week 1</th>
<th class="table-cell text-center" scope="col">Week 2</th>
<th class="table-cell text-center" scope="col">Week 3</th>
<th class="table-cell text-center" scope="col">Week 4</th>
<th class="table-cell text-center" scope="col">Week 5</th>
<th class="table-cell text-center" scope="col">Week 6</th>
<th class="table-cell text-center" scope="col">Week 7</th>
<th class="table-cell text-center" scope="col">Week 8</th>
</tr>
</thead>
<tbody>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<?php
include('includes/footer.php');
?>
You've to write your modal into the WHILE loop too that you are using for fetching data to add an individual modal for each row. Otherwise only the last id will find the modal. Format your code like this:
<?php
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
$id = $row["id"];
?>
<tr>
<td><?= $id ?></td> //<?= ?> is the short form of <?php echo '' ?>
.................
</tr>
<!-- Modal -->
<div class="modal fade" id="payments-<?php echo $id; ?>" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
..................
</div>
<?php }
} else { ?>
.............
<?php } ?>
I just went through your question and your code. As far as I can understand you want your modal to display the details of a particular student's payment records on which a user clicks.
Unfortunately, you have used a loop inside which you have defined a variable $id and the value of $id gets changed every time the loop iterates. So, in the end, $id holds the value of the very last record from the database.
As per your code, the generated HTML structure would be something like this(considering the record of five students):
<tbody>
<tr>
<td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-1">xyz</button></td>
</tr>
<tr>
<td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-2">xyz</button></td>
</tr>
<tr>
<td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-3">xyz</button></td>
</tr>
<tr>
<td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-4">xyz</button></td>
</tr>
<tr>
<td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-5">xyz</button></td>
</tr>
</tbody>
<div class="modal fade" id="payments-5">
.....
</div>
Here modal will get the id as 5 just because $id will hold the value of the last record. As the id from the last row of the table matches with the id of the modal, the modal only opens up from the last row.
So, this was the problem with the code. Hope you have understood what was wrong with your code. Now let's come to the solution part of this.
For this, I would recommend you to open the modal using jquery. Where you'll open the modal using a class selector and pass student_id in the modal using the data attributes.
Sharing a snippet for better help.
$('.open-modal').on('click', function() {
var student_id = $(this).data('student_id');
$('#student_id').val(student_id);
$('.modal').modal('toggle');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<table>
<tbody>
<tr>
<td><button type="button" class="open-modal" data-student_id='1'>Student 1</button></td>
</tr>
<tr>
<td><button type="button" class="open-modal" data-student_id='2'>Student 2</button></td>
</tr>
<tr>
<td><button type="button" class="open-modal" data-student_id='3'>Student 3</button></td>
</tr>
</tbody>
</table>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form>
<!–– form to be used for saving the data with student id as hidden input -->
Student ID: <input type="text" id="student_id">
</form>
</div>
</div>
</div>
</div>
This will let you create only one modal for n number of students.
I want to include a simple bootstrap modal. The code is minimal, but there seems to be something wrong.
When I click the view button the modal is displayed but no data shows up in it.
This is my index.php:
<?php
$connect = mysqli_connect("localhost", "root", "", "baps");
$query = "SELECT * FROM tab_organizers";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Bootstrap Modal with Dynamic MySQL Data using Ajax &
PHP</title>
<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>
</head>
<body>
<br /><br />
<div class="container" style="width:700px;">
<h3 align="center">Visitor's List</h3>
<br />
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="70%">Group Name</th>
<th width="30%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["GroupName"]; ?></td>
<td><input type="button" name="view" value="view" id="<?php echo
$row["id"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</body>
</html>
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Visitor Details</h4>
</div>
<div class="modal-body" id="visitor_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var OrganizerID = $(this).attr("id");
$.ajax({
url:"select.php",
method:"post",
data:{OrganizerID:OrganizerID},
success:function(data){
$('#visitor_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
This is my select.php:
<?php
if(isset($_POST["OrganizerID"]))
{
$output = '';
$connect = mysqli_connect("localhost", "root", "", "baps");
$query = "SELECT * FROM tab_organizers WHERE OrganizerID = '".$_POST["OrganizerID"]."'";
$result = mysqli_query($connect, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .='
<tr>
<td><label>Record Entered on: </label></td>
<td>'.$row["Datetimestamp"].'</td>
</tr>
<tr>
<td><label>Organizer ID: </label></td>
<td>'.$row["OrganizerID"].'</td>
</tr>
<tr>
<td><label>Group Name</label></td>
<td>'.$row["GroupName"].'</td>
</tr>
<tr>
<td><label>Contact Name</label></td>
<td>'.$row["ContactName"].'</td>
</tr>
<tr>
<td><label>House or Apartment #: </label></td>
<td>'.$row["Address1"].'</td>
</tr>
<tr>
<td><label>Street Name: </label></td>
<td>'.$row["Address2"].'</td>
</tr>
<tr>
<td><label>City: </label></td>
<td>'.$row["City"].'</td>
</tr>
<tr>
<td><label>Province: </label></td>
<td>'.$row["Province"].'</td>
</tr>
<tr>
<td><label>Postal Code: </label></td>
<td>'.$row["PostalCode"].'</td>
</tr>
<tr>
<td><label>Country: </label></td>
<td>'.$row["Country"].'</td>
</tr>
<tr>
<td><label>Title or Profession: </label></td>
<td>'.$row["Title"].'</td>
</tr>
<tr>
<td><label>Home or Office #: </label></td>
<td>'.$row["Telephone1"].'</td>
</tr>
<tr>
<td><label>Cell Number: </label></td>
<td>'.$row["Telephone2"].'</td>
</tr>
<tr>
<td><label>Fax Number: </label></td>
<td>'.$row["FaxNumber"].'</td>
</tr>
<tr>
<td><label>School Email Address: </label></td>
<td>'.$row["SchoolGeneralEmail"].'</td>
</tr>
<tr>
<td><label>Personal Email Address: </label></td>
<td>'.$row["Email"].'</td>
</tr>
<tr>
<td><label>How did you hear about us: </label></td>
<td>'.$row["HowDidYouHear"].'</td>
</tr>
<tr>
<td><label>Santo`s or Karyakar`s Comments on this Organizer</label></td>
<td>'.$row["Comments"].'</td>
</tr>
<tr>
<td><label>Diwali Invites to be send?</label></td>
<td>'.$row["Diwaliinvites"].'</td>
</tr>
<tr>
<td><label>Subscribe to BAPS mailing list?</label></td>
<td>'.$row["SubscribedToMailingList"].'</td>
</tr>
';
}
$output .= "</table></div>";
echo $output;
}
?>
my database column names are as follows: OrganizerID(int(11))
GroupName(varchar(240)) ContactName(varchar(50)) Address1(varchar(50))
Address2(varchar(50)) City(varchar(50)) Province(varchar(50))
PostalCode(varchar(50)) Country(varchar(50)) Title(varchar(50))
Telephone1(varchar(50)) Telephone2(varchar(50)) FaxNumber(varchar(50))
SchoolGeneralEmail(varchar(50)) Email(varchar(100))
SubscribedToMailingList(bit(1)) HowDidYouHear(varchar(50))
Comments(mediumtext) Datetimestamp(datetime) Diwaliinvites(bit(1))
im trying to loaded the vehicle details using ajax and data modal dialog. but seem that the data does not loaded correctly and i cant seem to figured out what is wrong with codes.
<div class="container" style="width:900px;">
<h3 align="center">View All Available Vehicle</h3>
<br />
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th width="40%">Plate Number</th>
<th width="20%">Type</th>
<th width="20%">Status</th>
<th width="10%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["plateNo_vehicle"]; ?></td>
<td><?php echo $row["vehicle_Type"];?></td>
<td><?php echo $row["vehicle_status"];?></td>
<td><input type="button" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
data modal dialog used to display the details.
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Vehicles Details</h4>
</div>
<div class="modal-body" id="vehicle_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
this is the select.php that i used
<?php
if(isset($_POST["vehicle_id"])) {
$output = '';
$link=msqli_connect("localhost","root","root","vms");
$query = "SELECT * FROM vehicle WHERE id_vehicle = '".$_POST["vehicle_id"]."'";
$result = mysqli_query($link, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td width="30%"><label>Plate No</label></td>
<td width="70%">'.$row["plateNo_vehicle"].'</td>
</tr>
<tr>
<td width="30%"><label>Engine Number</label></td>
<td width="70%">'.$row["engineNo_vehicle"].'</td>
</tr>
<tr>
<td width="30%"><label>Engine Capacity</label></td>
<td width="70%">'.$row["engineCapacity_vehicle"].'</td>
</tr>
';
}
$output .= "</table></div>";
echo $output;
}
?>
script used
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var vehicle_id = $(this).attr("id_vehicle");
$.ajax({
url:"select.php",
method:"post",
data:{vehicle_id:vehicle_id},
success:function(data){
$('#vehicle_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
Have a look at your select.php file:
<?php
if(isset($_POST["vehicle_id"])) {
$output = '';
$link=msqli_connect("localhost","root","root","vms"); <========
TYPO. It should've been:
$link=mysqli_connect("localhost","root","root","vms");
Also,
Add a data-vehicleid attribute to your view_data button:
<td><input type="button" data-vehicleid="<?php echo $row["id_vehicle"]; ?>" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data " /></td>
And then change your script to receive that attribute value:
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var vehicle_id = $(this).attr("data-vehicleid"); <=====
$.ajax({
....
});
});
});
</script>
Right now, you've set it to :
var vehicle_id = $(this).attr("id_vehicle");
which won't work as you don't have an attribute called id_vehicle="..." on that button. I'm guessing you meant attr("id");
Add this code on your while loop
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["plateNo_vehicle"]; ?></td>
<td><?php echo $row["vehicle_Type"];?></td>
<td><?php echo $row["vehicle_status"];?></td>
<td><input type="button" name="view" value="more" data-vehicle-id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
And in script change your id var vehicle_id = $(this).attr("data-vehicle-id");
Hope this code work
in order to get the id of this this you need to add onclick
<td><input type="button" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" onclick="getId(this.id)"/></td>
function getId(clicked_id){
var vehicle_id = clicked_id;
$.ajax({
url:"select.php",
method:"post",
data:{vehicle_id:vehicle_id},
success:function(data){
$('#vehicle_detail').html(data);
$('#dataModal').modal("show");
}
});
}
Here is updated code for view:
view:
<div class="container" style="width:900px;">
<h3 align="center">View All Available Vehicle</h3>
<br />
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th width="40%">Plate Number</th>
<th width="20%">Type</th>
<th width="20%">Status</th>
<th width="10%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["plateNo_vehicle"]; ?></td>
<td><?php echo $row["vehicle_Type"];?></td>
<td><?php echo $row["vehicle_status"];?></td>
<td>more</td>
</tr>
<?php
}
?>
</table>
</div>
</div>
Script:
<script>
$('#dataModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var vehicle_id = button.data('vehicle_id')
var modal = $(this)
$.ajax({
url:"select.php",
method:"POST",
data:{vehicle_id:vehicle_id},
success:function(data){
modal.find('.modal-body').html('No Response');
modal.find('.modal-body').html(data);
$('#vehicle_detail').html(data);
$('#dataModal').modal("show");
}
});
});
</script>
When I click the delete button, the values of those checkboxes that are checked in the table are not shown. It is suppose to delete records on the database based on the id but i'm stuck in getting the value of the checkboxes. Please help correct my code. I'm using bootstrap for your information.
PHP
$sql = "SELECT id, title FROM box";
$query = mysqli_query($db, $sql);
if(isset($_POST['btnDelete'])) {
$checkbox = isset($_POST['chkDelete']) ? $_POST['chkDelete'] : array();
for($i=0;$i<count($checkbox);$i++)
{
$message = $checkbox[$i];
}
}
HTML
<div class="content">
<div id="table">
<table class="col-md-12 table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th></th>
<th>#</th>
<th>Title</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
while($result = mysqli_fetch_array($query))
{
$html = '<tr>
<td data-title="">
<input name="chkDelete[]" type="checkbox" value="' . $result['id'] . '">
</td>
<td data-title="#">' . $result['id'] . '</td>
<td data-title="Title">' . $result['title'] . '</td>
<td data-title="Action">
Edit
</td>
</tr>';
echo $html;
}
?>
</tbody>
</table>
</div>
<form action="" method="POST">
<input type="submit" name="btnDelete" value="Delete" />
</form>
<div class="message"><?php echo $message;?></div>
</div> <!--//END content-->
PHP (Write Delete Query inside for loop to delete all checked checkbox.)
<?php
if(isset($_POST['btnDelete']))
{
$checkbox = isset($_POST['chkDelete']) ? $_POST['chkDelete'] : array();
$id = 0;
for($i=0;$i<count($checkbox);$i++)
{
$id = $checkbox[$i];
$deleteQuery = "DELETE FROM box WHERE id='$id'";
$DeleteQueryExec = mysqli_query($db, $deleteQuery);
}
}
?>
HTML (Put entire table inside <form></form>)
<div class="content">
<form action="" method="POST">
<div id="table">
<table class="col-md-12 table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th></th>
<th>#</th>
<th>Title</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT id, title FROM box";
$query = mysqli_query($db, $sql);
while($result = mysqli_fetch_array($query))
{
$html = '<tr>
<td data-title="">
<input name="chkDelete[]" type="checkbox" value="' . $result['id'] . '">
</td>
<td data-title="#">' . $result['id'] . '</td>
<td data-title="Title">' . $result['title'] . '</td>
<td data-title="Action">
Edit
</td>
</tr>';
echo $html;
}?>
</tbody>
</table>
</div>
<input type="submit" name="btnDelete" value="Delete" />
<div class="message"><?php echo $message;?></div>
</form>
</div> <!--//END content-->