Modify table column data on button click - javascript

I am making a Leave Management System using PhP-Mysql.
I have a table which takes input from user while applying for their leaves.
(name, leavetype, fromdate, todate, supervisor, reason and status). Only the status column has a predefined value 'pending'.
Now I want to introduce two buttons (Accept/Reject) on each row. Which on click will change the value for Status field.
I am not sure how to do it, I have tried updating the table column but it updates only if there is a where Condition, which will not be the correct procedure for such case.
<div id="content">
<?php
$connect = new mysqli("127.0.0.1","root","","leavedb");
$sql = "SELECT
name,
leavetype,
fromdate,
todate,
supervisor,
reason,
DATEDIFF(todate,fromdate) as Days,
status as Status
FROM leavereq";
$result = $connect->query($sql);
?>
<table id="myTable">
<tr>
<th>Name</th>
<th>Leave Type</th>
<th>From Date</th>
<th>To Date</th>
<th>Supervisor</th>
<th>Reason</th>
<th>No. of Days</th>
<th>Status</th>
</tr>
<?php
while ($report=$result->fetch_assoc())
{
echo "<tr>";
echo "<td>".$report['name']."</td>";
echo "<td>".$report['leavetype']."</td>";
echo "<td>".$report['fromdate']."</td>";
echo "<td>".$report['todate']."</td>";
echo "<td>".$report['supervisor']."</td>";
echo "<td>".$report['reason']."</td>";
echo "<td>".$report['Days']."</td>";
echo "<td>".$report['Status']."</td>";
echo "<td>" . '<input type="submit" name="approve" value="Approve">' . "</td>";
echo "<td>" . '<input type="submit" name="reject" value="Reject">' . "</td>";
}
?>
</table>
</div>

//In the html : You have to add unique id for every <td> of status & also wants to change the input type of approve & reject...also require javascript
// check below
<script>
function function_name(status_id,req)
{
var status;
status='status'+status_id;
if(req=='approve')
{
document.getElementById(status).innerHTML='approve';
//pass ajax call to update entry in db
}
else if(req=='reject')
{
document.getElementById(status).innerHTML='reject';
//pass ajax call to update entry in db
}
</script>
<table id="myTable">
<tr>
<th>Name</th>
<th>Leave Type</th>
<th>From Date</th>
<th>To Date</th>
<th>Supervisor</th>
<th>Reason</th>
<th>No. of Days</th>
<th>Status</th>
</tr>
<?php
$i=0;
while ($report=$result->fetch_assoc())
{
echo "<tr>";
echo "<td>".$report['name']."</td>";
echo "<td>".$report['leavetype']."</td>";
echo "<td>".$report['fromdate']."</td>";
echo "<td>".$report['todate']."</td>";
echo "<td>".$report['supervisor']."</td>";
echo "<td>".$report['reason']."</td>";
echo "<td>".$report['Days']."</td>";
echo "<td id='status$i'>pending</td>";
echo "<td>" . '<button type="button" name="approve"'.$i.' onClick="return function_name($i,approve);">Approve</button>' . "</td>";
echo "<td>" . '<button type="button" name="reject"'.$i.' onClick="return function_name($i,reject);">Reject</button>' . "</td>";
$i++;
}
?>
</table>

Related

Database row is not deleting, AJAX, PHP error

I want to remove DB row data from HTML table. I have an HTML table where I have called all the database table values. I want to give a delete order option to the user. I have used a delete button for that. To do this, I am trying to use ajax and jquery with php delete query. But the issue is When I click on delete it just deletes the HTML row data. It should delete that particular id row from DB as well. I need your help. Please let me know what I have done wrong? I am very much new to ajax and jquery.
remove.php
<?php
include "config.php";
$id = $_REQUEST['id'];
// Delete record
$query = "DELETE FROM mi_home_tv WHERE id='$id'";
mysqli_query($link,$query);
echo 1;
jquery+ajax code
<script src='jquery-3.0.0.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
// Delete
$('.delete').click(function(){
var el = this;
var id = this.id;
var splitid = id.split("_");
// Delete id
var deleteid = splitid[1];
// AJAX Request
$.ajax({
url: 'remove.php',
type: 'POST',
data: { id:deleteid },
success: function(response){
// Removing row from HTML Table
$(el).closest('tr').css('background','tomato');
$(el).closest('tr').fadeOut(800, function(){
$(this).remove();
});
}
});
});
});
</script>
Button Code:
echo "<td> <span id='del_<?php echo $id; ?>' type='submit' class=' delete btn c-theme-btn c-btn-uppercase btn-xs c-btn-square c-font-sm'>Delete</span> </td>";
php code:
<form method="post" action="remove.php">
<?php
echo " <thead>
<tr>
<th>Order ID</th>
<th>Date</th>
<th>Name</th>
<th>Store Name</th>
<th>Zip</th>
<th>City</th>
<th>Address</th>
<th>Contact</th>
<th>Tv Varient</th>
<th>Total</th>
<th>Delivery</th>
<th>Action</th>
</tr>
</thead>
<tbody>";
while($row = mysqli_fetch_array($result))
{
$id = $row['id'];
echo"<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['rdate'] . "</td>";
echo "<td>" . $row['rname'] . "</td>";
echo "<td>" . $row['rstore'] . "</td>";
echo " <td>" . $row['rzip'] . "</td>";
echo "<td>" . $row['rcity'] . "</td>";
echo "<td>" . $row['raddress'] . "</td>";
echo "<td>" . $row['rphone'] . "</td>";
echo "<td>" . $row['rtv_varient'] . "</td>";
echo"<td>" . $row['ramount'] . "</td>";
echo"<td>" . $row['rdelivery'] . "</td>";
echo "<td> <input type='submit' value='delete' id='del_<?php echo $id; ?>' type='submit' class=' delete btn c-theme-btn c-btn-uppercase btn-xs c-btn-square c-font-sm'>Delete</button> </td>";
echo"</tr>";
}
?>
</form>
You should have a form which will have an input as follows:
<form method="post" action="remove.php">
<input type="submit" value="Delete" name="id" />
</form>

Update checked state of checkbox in table header on page load

I have a table with a checkbox at the top of the first column to allow the user to select all items in the table and perform an AJAX script. I'm using PHP to generate the html table from a database query - I'd like to set the checked value for the header checkbox if all items in the table are also checked for the same column.
In the PHP file I'm setting up the table and the header rows first, then doing a foreach loop to create the table rows from the found records. I could add a counter along the way to track how many rows are checked, but as this is happening after the table header I can't see a way to subsequently update the header row? Unless this could be done via Javascript?
Here's my PHP page that generates the table:
<table class="table table-condensed table-striped table-bordered">
<thead>
<th><input type="checkbox" class="select-all checkbox" name="select-all" /> </th>
<th class="text-center" scope="col">Product ID</th>
<th class="text-center" scope="col">Description</th>
</thead>
<tbody>
$found = $result->getFoundSetCount();
foreach($records as $record) {
$productID = $record->getField('productID');
if (!in_array($productID, $_SESSION['selectedProductIDs'])) {
$checked = '';
} else {
$checked = ' checked';
}
?>
<tr class="" id="<?php echo $recid ?>">
<td id="<?php echo $productID; ?>"><input type="checkbox" class="select-item checkbox" name="select-item" value="<?php echo $productID; ?>" <?php echo $checked; ?>></td>
<td><?php echo $productID; ?></td>
<td><?php echo $record->getField('Description'); ?></td>
</tr>
} // foreach
i did not test this code, but i think is what do you search
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
var allAreChecked = true;
$("table > tbody > tr > td > input[type=checkbox]").each(function(){
if(! $(this).is(':checked'))
allAreChecked = false;
});
if(allAreChecked === true){
$("table > thead > tr > th > input[type=checkbox]").prop('checked', true);
}
});
</script>
simple do the trick with string concatenation like below
1st : First run the foreach loop and concatenate all tr as a string .
2nd : Outside the foreach loop Set the $check_all_button=true; in foreach loop check any row is not checked means set the variable to false.
3rd : After all this concatenate the table header part with another variable . based on $check_all_button variable value check the checkbox .
4th : Finally echo the both variables . to render the html table .
<?php
$found = $result->getFoundSetCount();
$table_tr='';
$check_all_button=true;
foreach($records as $record)
{
$productID = $record->getField('productID');
if (!in_array($productID, $_SESSION['selectedProductIDs'])) {
$checked = '';
$check_all_button=false;
} else {
$checked = ' checked';
}
$table_tr.="<tr class='' id='<?php echo $recid ?>'>
<td id='<?php echo $productID; ?>'><input type='checkbox' class='select-item checkbox' name='select-item' value='<?php echo $productID; ?>' <?php echo $checked; ?>></td>
<td><?php echo $productID; ?></td>
<td><?php echo $record->getField('Description'); ?></td></tr> ";
<?php
}
$check_all_button=true;
$table_and_head='';
$table_and_head.="<table class='table table-condensed table-striped table-bordered'>
<thead>
<th><input type='checkbox' class='select-all checkbox' name='select-all'";
if($check_all_button==true){ $table_and_head.=' checked'; }
$table_and_head.=" /> </th>
<th class='text-center' scope='col'>Product ID</th>
<th class='text-center' scope='col'>Description</th>
</thead>
<tbody> </tbody> </table>";
echo $table_and_head;
echo $table_tr;
?>

ASK - jquery datepicker - keep selected date in text input

I made a page which in html, php and jquery.
My php script will load all data where date is equals with date selected in text input which using JQuery datepicker.
My problem is when I selected a date in datepicker and then the page will load the data, the text input at datepicker being blank (no text or date).
so how to keep the selected date in the text input?
<link rel="stylesheet" href="/resources/demos/style.css">
$(function() {
$("#datepicker").datepicker({dateFormat: 'yy-mm-dd'});
});
$(document).ready(function() {
$('#datepicker').change(function() {
$('#calendar').submit();
});
});
I need some advices to fix this. So thank you for your help. And also I want to apologize if my topic is alike with another.
Thanks for your help.
Here is my code script
<center>
<form id="calendar" action="<?php echo $_SERVER['PHP_SELF'];?>" method="GET">
<div id="datepicker_start"></div>
<input type="hidden" id="datepicker" name="datepicker">
</form>
</center>
<?php
$host = "localhost";
$dbname = "dbname";
$username = "root";
$password = "";
try {
$conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $pe) {
die("Could not connect to the database $dbname :" . $pe->getMessage());
}
if(isset($_GET["datepicker"])){
$datepicker = $_GET["datepicker"];
$datepicker2 = date('d-m-Y', strtotime($datepicker));
}else{
$datepicker = date('Y-m-d');
$datepicker2 = date('d-m-Y', strtotime($datepicker));
}
$stmt = $conn->prepare("my query");
$stmt->bindParam(':date', $datepicker);
$stmt->execute();
$result = $stmt->fetchall();
if (empty($result)) {
echo "<center><h3>.:: Schedule <i>". $datepicker2 ." ::.</i></h1></center>";
echo "<center><h1>.::No Data::.</h1></center>";
}else{
echo "<center><h3>.:: Schedule <i>". $datepicker2 ." ::.</i></h1></center>";
echo
"<table>
<tr>
<th>Data 1</th>
<th>Data 2</th>
<th>Data 3</th>
<th>Data 4</th>
<th>Data 5</th>
<th>Data 6</th>
<th>Data 7</th>
<th>Data 8</th>
<th>Data 9</th>
</tr>"
;
foreach($result as $row)
{
echo "<tr>";
echo "<td>" . $row['data 1'] . "</td>";
echo "<td>" . $row['data 2'] . "</td>";
echo "<td>" . $row['data 3'] . "</td>";
echo "<td>" . $row['data 4'] . "</td>";
echo "<td>" . $row['data 5'] . "</td>";
echo "<td>" . $row['data 6'] . "</td>";
echo "<td>" . $row['data 7'] . "</td>";
echo "<td>" . $row['data 8'] . "</td>";
echo "<td>" . $row['data 9'] . "</td>";
}
echo "</tr>";
echo "</table>";
}
?>
Form Submit reloads The Page.
So you should send the Date from server script on form submit and set it on the input field.
or you can use ajax

Bootstrap table pagination with MySQL and PHP

I have a mysql database which is selecting results where $name = kicked,
this returns several results (usually 50+)
I do not know how to paginate the results - help?
This is the code for my table:
<div class="tab-pane" id="2">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Kicker</th>
<th>Kick Reason</th>
</tr>
</thead>
<tbody id="myTable">
<?php
$kicks = mysql_query("select * from Kicks where kicked = '$name'");
while($row = mysql_fetch_array($kicks))
{
echo "<tr>";
echo "<td>" . $row['kicker'] . "</td>";
echo "<td>" . $row['reason'] . "</td>";
echo "</tr>";
} ?>
</tbody>
</table>
<ul class="pagination pagination-lg pager" id="myPager"></ul>
</div>
You should look into using the Mysql LIMIT clause. It allows you to select x elements from your table starting at offset y. The offset can be determined by passing a page number parameter to your page.
Pseudo code:
.../page.php?pagenumber=2
$iPerPage = 10;
$iOffset = (pagenumber - 1) * $iPerPage;
SELECT ... FROM `kicks` LIMIT $iOffset, $iPerPage;
See this link

How to store values into database after retrieving from database placing checkbox before each row?

My code retrieves some values from database and displays in a table. Before each row I am placing a checkbox such that when it is checked that value can be stored in database. Each row contains four columns. It may retrieve several rows. If I select few rows then these rows should be store into database.
<table border='0' align="center">
<tr class="db_table_tr3" >
<th class="db_table_th3" > </th>
<th class="db_table_th3" >Course Code</th>
<th class="db_table_th3" >Course Name</th>
<th class="db_table_th3" >Instructor</th>
<th class="db_table_th3" >Credit</th>
</tr>
<?php
$query = "select *from course_details WHERE branch='$branch' AND sem='$sem'";
$run = mysql_query($query) or die($query."<br/><br/>".mysql_error());
$num = mysql_numrows($run);
while($row = mysql_fetch_assoc($run)){
echo "<tr >";
echo '<td><input type="checkbox" name="ticked[]" value="' . $row['course_codes'] . '"></td>';
// echo "<td>" . $row['usn'] . "</a>" . "</td>";
echo "<td>" . $row['course_codes'] . " </td>";
echo "<td>" . $row['course_names'] . " </td>";
echo "<td>" . $row['course_instructors'] . " </td>";
echo "<td>" . $row['course_credits'] . " </td>";
}
echo "</tr>";
now i want to store the first column as follows
$ch1=$_POST['ticked'];
if(isset($_POST['submit'])){
for($i=0; $i<sizeof(ch1); $i++){
here is the query
}
}
does the above code is correct. how to store values of all columns in different tables.
Instead of putting a value for 'course_codes' in checkbox use 'course_details' table primary key. So you can retrieve data according to the primary key on a post page and insert a record as per your requirement. Secondly you can make an array of hidden variables and do the insertion part

Categories

Resources