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>
Related
I am trying to create a page to allow toggling on and off certain forums in website, created from raw data in an SQL server. However I need each to have an individual ID so I can show/hide them based on user preference. I am not sure how to go about it. Here is my existing code, disregard the connection values, I am hiding them on purpose. thanks.
$db_host = "host";
$db_username = "username";
$db_pass = "pass";
$db_name = "name";
$db = new PDO('mysql:host='.$db_host.';dbname='.$db_name,$db_username,$db_pass);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
$query = $db->query('SELECT p.name, p.company, o.prodtype AS Type
FROM ownedproducts AS o
JOIN product as p ON p.productID = o.productID
WHERE o.usersID = 2');
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title> User Forum Selection </title>
</head>
<body>
<div>
<input type="text" id="userid">
</div>
<div>
<hr>
<table id=table border = '2'>
<tr id=table-row>
<th id=table-header>Name</th>
<th id=table-header>Company</th>
<th id=table-header>Type</th>
</tr>
<?php
while ($row = $query->fetch())
{
echo "<tr id=table-row >";
echo "<td>" . $row['name'] ."</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
?>
</table>
</div>
</body>
</html>
What about using the product id ? That sounds logical here.
Select it :
$query = $db->query('SELECT p.productID, p.name, p.company, o.prodtype AS Type ...
Then use it in your rows :
while ($row = $query->fetch())
{
echo "<tr id='table-row-" . $row['id'] . "' >";
echo "<td>" . $row['name'] ."</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
Always use single and double quote in id as (id=' ', id=" ")
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title> User Forum Selection </title>
</head>
<body>
<div>
<input type="text" id="userid">
</div>
<div>
<hr>
<table id=table border = '2'>
<tr id=table-row>
<th id=table-header>Name</th>
<th id=table-header>Company</th>
<th id=table-header>Type</th>
</tr>
<?php
while ($row = $query->fetch())
{
echo "<tr id=table-row >";
echo "<td>" . $row['name'] ."</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
?>
</table>
</div>
</body>
</html>
use it in your rows :
<?php
foreach( $query->fetch() as $rows=> $row)
{
echo "<tr id='table-row-'.$rows >";
echo "<td>" . $row[or</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
?>
I'd probably do it in a foreach and use the key.
foreach( $query->fetch() as $key => $row)
{
echo "<tr id='table-row-'.$key >";
echo "<td>" . $row['name'] ."</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
I am not able to update one column field. Please Suggest me what is the wrong thing in my code
index.php
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db_name = "logistics";
$lastId="";
//create connection
$con = mysqli_connect($host, $user, $pass, $db_name);
$result = mysqli_query($con,"SELECT * FROM notification");
?>
<div class="table-inner-wrapper">
<h5 class="text- blll"> Active Alerts </h5>
<table class="table table-hover table-striped">
<tr class="t_head">
<th>ID </th>
<th>Forklift ID</th>
<th>Timestamp</th>
<th>Duration</th>
<th>Alert Details</th>
<th></th>
<th>Remark</th>
<th></th>
</tr>
<?php
while($row = mysqli_fetch_array($result)){
echo "<form action='' id='remarks' method='post'>";
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['forklift_id'] . "</td>";
echo "<td>" . $row['noti_start'] . "</td>";
echo "<td>" . $row['duration'] . " hr</td>";
echo "<td>" . $row['alert_details'] . "</td>";
echo "<td><i class='email' id='". $row['id'] ."'> <i class='fa fa-inbox fa-2x'> </i> </i> </td>";
echo "<td><textarea class='remarks' id='".$row['id']."'> ".$row['remarks']." </textarea></td>";
echo "<td><input type='button' class='btn btn-info remark' value='submit' id='".$row['id']."'></td>";
echo "</tr>";
echo "</form>";
}
?>
</table>
</div>
<script type="text/javascript">
$(() => {
$(document).ready(function(){
$(".remark").on('click',function(e){
e.preventDefault();
var id = $(this).attr('id');
var remarks = $("textarea.remarks").val();
// alert(remarks);
// alert(id);
$.ajax({
url:'remark.php',
method:'POST',
data: {id: id, remarks: remarks},
success:function(data){
alert(data);
// return data;
}
});
});
});
})
</script>
remark.php
<?php
$conn = new mysqli('localhost', 'root', '', 'logistics');
$remarks = $_POST['remarks'];
echo $remarks;
$id = $_REQUEST['id'];
echo $id;
$sql = "UPDATE notification SET remarks='".$remarks."' WHERE id='".$id."' " ;
if($conn->query($sql)===TRUE){
echo "DATA updated";
}
?>
I am trying to update remarks column value on submit based on row id but it's updating only a first row of column value and if i click on the remaining rows it is not updating the remarks value.
A couple things:
I would change $id = $_REQUEST['id']; to $id = $_POST['id'];
Secondly, your <form> tag is inside your while loop which means you are echoing out a new form on every iteration. All of the forms will have the same id. This will cause you problems and fits the type of behavior that you are describing. Remove the <form> tags from the inside of the loop like so:
echo "<form action='' id='remarks' method='post'>";
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['forklift_id'] . "</td>";
echo "<td>" . $row['noti_start'] . "</td>";
echo "<td>" . $row['duration'] . " hr</td>";
echo "<td>" . $row['alert_details'] . "</td>";
echo "<td><i class='email' id='". $row['id'] ."'> <i class='fa fa-inbox fa-2x'> </i> </i> </td>";
echo "<td><textarea class='remarks' id='".$row['id']."'> ".$row['remarks']." </textarea></td>";
echo "<td><input type='button' class='btn btn-info remark' value='submit' id='".$row['id']."'></td>";
echo "</tr>";
}
echo "</form>";
This line:
var remarks = $("textarea.remarks").val();
will only give you the value of the first textarea with the class remarks. You need to access the remarks from the textarea associated with the button instead. You do have a problem though that you have multiple elements with the same id, so you need to fix that first. Try changing this code:
echo "<td><i class='email' id='". $row['id'] ."'> <i class='fa fa-inbox fa-2x'> </i> </i> </td>";
echo "<td><textarea class='remarks' id='".$row['id']."'> ".$row['remarks']." </textarea></td>";
to
echo "<td><i class='email' id='e". $row['id'] ."'> <i class='fa fa-inbox fa-2x'> </i> </i> </td>";
echo "<td><textarea class='remarks' id='t".$row['id']."'> ".$row['remarks']." </textarea></td>";
Now your textarea field has a unique id which is still related to $row['id']. So in your event code, you can write:
var remarks = $("#t" + id).val();
to get the value of remarks associated with that button.
I have code
if($rowcount1 > 0){
?>
<h3 class="text-muted"><u>DEPARTURE</u></h3>
<h4><?php echo "$origin to $destination "?></h4>
<table class="table table-hover">
<thead>
<tr>
<th>FLIGHT NO.</th>
<th>DEPART</th>
<th>ARRIVE</th>
<th>AIRPORT</th>
<th>DURATION</th>
<th>FLY ONLY</th>
<th>FLY + BAGGAGE</th>
</tr>
</thead>
<tbody>
<?php
foreach ($query as $flightr) {
echo "<tr>";
echo "<td>".$flightr['id']."</td>";
echo "<td>".$flightr['depart']."</td>";
echo "<td>".$flightr['arrive']."</td>";
echo "<td>".$flightr['airport']."</td>";
echo "<td>".$flightr['duration']."</td>";
echo "<td> <label for=lbl7> <input type='radio' checked id='lbl7' name='flight[]' value='".$flightr['flyonly']."'> PHP ".number_format($flightr['flyonly'])."</label></td>";
echo "<td> <label for=lbl8> <input type='radio' checked id='lbl8' name='flight[]' value='".$flightr['flybaggage']."'> PHP ".number_format($flightr['flybaggage'])."</label></td>";
echo "</tr>";
}
?>
</tbody>
</table>
<hr>
<?php
}else{
echo " <div class='alert alert-info' role='alert'>
No results found on <BIG class='text-muted'>Departure</BIG> pick another flight thank you.
</div>
";
}
}
}
?>
<button type="button" name="forform" onclick="" class="hit">hit</button>
how to put info message that user cant continue (and they cant click the button to continue), if number of rows is not true. Via button onclick. begginer in js sorry. Thanks in advance
Add disabled attribute of button based on rowCount
<button type="button" name="forform" onclick="" class="hit"
<?php echo ($rowcount1 > 0) ? '' : 'disabled'; ?>>hit</button>
You can do that by put button in if else condition with disable attributes
if ($rowcount1 > 0) {
?>
<h3 class="text-muted"><u>DEPARTURE</u></h3>
<h4><?php echo "$origin to $destination " ?></h4>
<table class="table table-hover">
<thead>
<tr>
<th>FLIGHT NO.</th>
<th>DEPART</th>
<th>ARRIVE</th>
<th>AIRPORT</th>
<th>DURATION</th>
<th>FLY ONLY</th>
<th>FLY + BAGGAGE</th>
</tr>
</thead>
<tbody>
<?php
foreach ($query as $flightr) {
echo "<tr>";
echo "<td>" . $flightr['id'] . "</td>";
echo "<td>" . $flightr['depart'] . "</td>";
echo "<td>" . $flightr['arrive'] . "</td>";
echo "<td>" . $flightr['airport'] . "</td>";
echo "<td>" . $flightr['duration'] . "</td>";
echo "<td> <label for=lbl7> <input type='radio' checked id='lbl7' name='flight[]' value='" . $flightr['flyonly'] . "'> PHP " . number_format($flightr['flyonly']) . "</label></td>";
echo "<td> <label for=lbl8> <input type='radio' checked id='lbl8' name='flight[]' value='" . $flightr['flybaggage'] . "'> PHP " . number_format($flightr['flybaggage']) . "</label></td>";
echo "</tr>";
}
?>
</tbody>
</table>
<hr>
<button type="button" name="forform" onclick="" class="hit">hit</button>
<?php
} else {
echo " <div class='alert alert-info' role='alert'>
No results found on <BIG class='text-muted'>Departure</BIG> pick another flight thank you.
</div>
";
echo '<button type="button" name="forform" onclick="" class="hit" disable="disable">hit</button>';
}
?>
i am retrieving some data from database and show them in a html table.but right now i am struggling with the following scenario.
if user clicks disable button it should be hide and enable button should be show.if user clicks on enable button it should be hide and disable button should be show.
Here is my code
<html>
<title></title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
</script>
</head>
<body>
<?php
echo "<table border='1' align='center' width='100%'>
<tr>
<th>ID</th>
<th>Image</th>
<th>Modified Date</th>
<th>URL</th>
<th>Clicks</th>
<th>Status</th>
<th>Action</th>
</tr>";
while($row = mysqli_fetch_array($query))
{
$id = $row['img_id'];
echo "<tr>";
echo "<td align='center'>" . $row['img_id'] . "</td>";
echo "<td align='center' width='500px'>" . '<img width = 200px; height=100px; src=" '. ($row['img_path']) . '"/>'. "</td>";
echo "<td align='center' width='350px'>" . $row['date'] . "</td>";
echo "<td align='center'>" . $row['url'] . "</td>";
echo "<td align='center'>" . $row['clicks'] . "</td>";
echo "<td align='center'>" . $row['status'] . "</td>";
echo "<td align='center'><a href='image_update.php?id=$id'><button>Update</button></a>
<form method='post' >
<input type='hidden' name='tid' value='$id'/>
<input type='submit' name='disable' id='disable' value='Disable'>
<input type='submit' name='enable' id='enable' value='Enable'>
</form>
</td>";
$id = $_POST['tid'];
if($_SERVER['REQUEST_METHOD']=='POST') {
$sql = "UPDATE advertisementnew SET status = 'Disabled' WHERE img_id='$id'";
mysqli_query($con, $sql);
}
echo "</tr>";
}
echo "</table>";
try this js:
$('#enable').css("display", "none");
$('#disable').click(function(){
$('#enable').css("display", "block");
$('#disable').css("display", "none");
});
instead of:
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
can you try this hope this is works
<script type = "text/javascript" >
$('input:submit').click(function () {
var check = $(this).attr('id');
if (check == 'disable') {
$('#enable').show();
$('#disable').hide();
}
if (check == 'enable') {
$('#disable').show();
$('#enable').hide();
}
});
</script>
You can have class
.hide-show{
display : none;
}
HTML :
<input type='submit' name='disable' id='disable' value='Disable' class="enable-disable-btn">
<input type='submit' name='enable' id='enable' value='Enable' class="enable-disable-btn hide-show">
Initially put the hide-show class on the button which should be need to hide.
Add class enable-disable-btn to both button enabled/disbaled
JS:
You can use jQuery#toggleClass
$(".enable-disable-btn").on('click',function(){
$(".enable-disable-btn").toggleClass('hide-show')
})
You need to add unique id dynamically created in while loop in your case id is not unique
for this
changes in php replace these two lines
<input type='submit' onclick='doEnableDesable(this)' name='disable' id='disable".$id."' value='Disable'>
<input type='submit' onclick='doEnableDesable(this)' name='enable' id='enable".$id."' value='Enable'>
And in javascript define function for dynamic Id
function doEnableDesable(params)
{
if (params.value == 'disable') {
$('#'+params.id).show();
$('#'+params.id).hide();
}
if (params.value == 'enable') {
$('#'+params.id).show();
$('#'+params.id).hide();
}
}
I have two tables on one page. The table at the top only has one row, because that particular table in the DB will only ever have one entry, the Tank of the Month. The bottom table shows the contents of another table in the database, 'uploads'. When an item is deleted from the bottom table, it deletes it from the DB and from the physical /uploads/ folder as expected. When an item is chosen from the bottom table as Tank of the Month, it is supposed to disappear from the bottom table, which it does correctly, then the top table is supposed to clear and the item that was chosen should automatically fade into the top table. I have tried many, many ways of doing this with no luck so far. The only way I can get the top table to refresh is by actually refreshing the page. This does what I want, but I want to do it without the page refresh.
totm.php (not the whole file as most of it works):
<!--put body stuff here-->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card card-plain">
<div class="header">
<h4 class="title">Current Tank of the Month</h4>
<p class="category">This is your current tank of the month. </p>
</div>
<div class="content table-responsive table-full-width">
<?php
// Check connection
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
else
{
if (!$stmt = $mysqli->query("SELECT * FROM totm")) {
echo "Query Failed!: (" . $mysqli->errno . ") ". $mysqli->error;
}
echo "<table class='table table-hover'>";
echo "<thead>
<th>Image</th>
<th>Filename</th>
<th>Description</th>
</thead>
<tbody>";
while ($row = mysqli_fetch_array($stmt)) {
$i = $row["id"];
$f = $row["file"];
$d = $row["description"];
echo "<tr id='$i' file='$f' desc='$d'>";
echo "<td> <a href='../assets/img/totm/" . $row["file"] . "'><img class='thumbnail' src='../assets/img/totm/" . $row["file"] . "' alt='" . $row["file"] . "' /> </td>";
echo "<td>" . $row["file"] . "</td>";
echo "<td>" . $row["description"] . "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
if (mysqli_num_rows($stmt) == 0) {
echo "No records found.";
}
}
$stmt->free();
//$mysqli->close();
?>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card card-plain">
<div class="header">
<h4 class="title">Current Entries</h4>
<p class="category">Here you will find the current entries for the Tank of the Month contest. Select one as the new Tank of The Month and delete the rest. Keep it clean around here! </p>
</div>
<div class="content table-responsive table-full-width">
<?php
// Check connection
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
else
{
if (!$stmt = $mysqli->query("SELECT * FROM uploads")) {
echo "Query Failed!: (" . $mysqli->errno . ") ". $mysqli->error;
}
echo "<table class='table table-hover'>";
echo "<thead>
<th>Image</th>
<th>Name</th>
<th>Email</th>
<th>IP</th>
<th>Date</th>
<th>Description</th>
<th>Action</th>
</thead>
<tbody>";
while ($row = mysqli_fetch_array($stmt)) {
$i = $row["id"];
$f = $row["file"];
$d = $row["description"];
echo "<tr id='$i' file='$f' desc='$d'>";
echo "<td> <a href='../uploads/" . $row["file"] . "'><img class='thumbnail' src='../uploads/" . $row["file"] . "' alt='" . $row["file"] . "' /> </td>";
echo "<td>" . $row["name"] . "</td>";
echo "<td>" . $row["email"] . "</td>";
echo "<td>" . $row["ip"] . "</td>";
echo "<td>" . $row["date"] . "</td>";
echo "<td>" . $row["description"] . "</td>";
echo "<td>
<button class='btn btn-round btn-danger deleteitem'>Delete</button>
<div class='space-20'></div>
<button class='btn btn-round btn-success chooseitem'>Select</button>
</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
if (mysqli_num_rows($stmt) == 0) {
echo "No records found.";
}
}
$stmt->free();
$mysqli->close();
?>
</div>
</div>
</div>
</div>
</div>
</div>
totm-backend.js:
$(".deleteitem").click(function () {
var parent = $(this).closest('TR');
var id = parent.attr('id');
var file = parent.attr('file');
if (confirm("Are you sure you want to delete this?")) {
$.ajax({
type: "POST",
data: { delete_id: id, delete_file : file },
URL: "totm.php",
success: function (msg) {
parent.fadeOut('slow', function () { $('#' + id).remove() });
}
});
}
return false;
});
$(".chooseitem").click(function () {
var parent = $(this).closest('tr');
var id = parent.attr('id');
var file = parent.attr('file');
var desc = parent.attr('desc');
if (confirm("Are you sure you want to promote this to Tank of the Month?")) {
$.ajax({
type: "POST",
data: { promote_id: id, promote_file: file, promote_desc: desc },
URL: "totm.php",
success: function (msg) {
parent.fadeOut('slow', function () { $('#' + id).remove() });
}
});
}
return false;
});
You could use the appendTo function to append the item into the proper table.
Check this post out on how to do it.
To get the "current" table, check out hasClass
I'm just learning javascript and jquery myself so there may be better ways.