Delete from database using javascript - javascript

I have a page containing a database table with all the rows and columns.
What I am trying to do is to select all the rows I want and then delete them when I click on the button.
This is what I've done so far in the table.php page:
<?php
include "config.php"; //connection to database
incude "home.js";
$funcao="Select * from palavras";
$result=mysqli_query($link, $funcao);
?>
<button id="button_apaga" type="button" onclick="delete()" > DELETE </button>
<?php if($result->num_rows > 0) { ?>
<table class="table">
<tr>
<th>IdPalavra</th>
<th>Palavra</th>
<th>Grau de Dificuldade</th>
<th>Data</th>
<th>Hora</th>
<th>Selecionar</th>
</tr>
<?php while($row = mysqli_fetch_assoc($result)) { ?>
<tr role="row">
<td><?php echo $row['idpalavras']; ?></td>
<td><?php echo $row['palavra']; ?></td>
<td><?php echo $row['graudificuldade']; ?></td>
<td><?php echo $row['data']; ?></td>
<td><?php echo $row['hora']; ?></td>
<td><input type="checkbox" name="check" id="checkbox" /></td>
</tr>
<?php } ?>
</table>
<?php }
else{
echo "0 resultados";
} ?>
JavaScript Page (home.js):
function delete(id){
var check = document.getElementById('checkbox');
if(check.checked) {
// sql query
}
My question is how can I do que sql query considering it's in a different page. Can I just open php and put the query inside?
Also how can I receive all the IDs from the selected rows to the function?
Thank you in advance.

One approach would be to use AJAX. For the purpose of condensing the code, I'm going to also incorporate jQuery into this solution. I am also going to change your checkbox to an individual button link for the sake of making this a bit less code. A solution to delete multiple at the same time could work similarly to this, but since you're using AJAX most likely this is going to be easier for your users.
Modify table.php
<?php
include "config.php"; //connection to database
incude "home.js";
$funcao="Select * from palavras";
$result=mysqli_query($link, $funcao);
?>
<?php if($result->num_rows > 0) { ?>
<table class="table">
<tr>
<th>IdPalavra</th>
<th>Palavra</th>
<th>Grau de Dificuldade</th>
<th>Data</th>
<th>Hora</th>
<th>Selecionar</th>
</tr>
<?php while($row = mysqli_fetch_assoc($result)) { ?>
<tr role="row" class="palavras_row">
<td><?php echo $row['idpalavras']; ?></td>
<td><?php echo $row['palavra']; ?></td>
<td><?php echo $row['graudificuldade']; ?></td>
<td><?php echo $row['data']; ?></td>
<td><?php echo $row['hora']; ?></td>
<td>Delete</td>
</tr>
<?php } ?>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js?ver=3.3.1"></script>
<script type="text/javascript">
(function($) {
$(document).on('click', '.palavras_row a.palavras_delete', function() {
var _id = $(this).attr('data-id');
var _row = $(this).parent().parent();
$.ajax({
url: 'delete.php',
data: {
idpalavras: _id
},
type: 'POST',
dataType: 'json',
success: function(__resp) {
if (__resp.success) {
_row.remove(); // Deletes the row from the table
}
}
});
});
})(jQuery);
</script>
Create a new file in the same folder as your table.php and name it delete.php
<?php
$idpalavras = filter_input(INPUT_POST, 'idpalavras', FILTER_SANITIZE_NUMBER_INT);
$success = false;
if ($idpalavras) {
include "config.php"; //connection to database
$funcao="delete from palavras where idpalavras = " . $idpalavras;
$result=mysqli_query($link, $funcao);
$success = true;
}
header('Content-Type: application/json');
echo json_encode(array('success' => $success));
The solution above sends a simple command to your PHP backend where the delete query can be run by PHP. You cannot run a mysql command directly from javascript since that is frontend code.
This code is a functional solution, but it is abbreviated; a more complete solution would have more detailed handling of potential errors (either via AJAX or processing your delete query). It should also have some security on your delete.php to make sure unauthorized users aren't able to delete records without the proper permission to do so.

Related

displaying data from the database that can be removed from the php page with a checkbox using ajax,

guys, I am doing a project in PHP where I should display in a page data from the database and remove from the page(not database) if I checkbox them using ajax. any source or link that could help me understand better this? thank you!!
p.s all I've done so far is deleting the data from the page and database at the same time
while($row = mysqli_fetch_array($result))
{
<tr id="<?php echo $row["id"]; ?>" >
<td><?php echo $row["id"]; ?></td>
<td><?php echo $row["name"]; ?></td>
<td><?php echo $row["surname"]; ?></td>
<td><input type="checkbox" name="id[]" class="delete" value="<?php echo $row["id"]; ?>" /></td>
**deleting method **
$.ajax({
url:'delete.php',
method:'POST',
data:{id:id},
success:function() {
for(var i=0; i<id.length; i++){
$('tr#'+id[i]+'').css('background-color', '#ccc');
$('tr#'+id[i]+'').fadeOut('slow');
If you're not deleting from the database then using AJAX isn't needed at all; use a javascript event listener that is triggered by a "delete selected" button or by the checkboxes themselves to remove the row from the table

Display progress of a long mysql query using php

Im trying to display the progress percentage of a long mysql query using php
I have button to make the filter in my database , that runs a js function that calls using ajax a php file
function show(){
$.ajax({
url:"backend.php",
type:"POST",
beforeSend:function(){
$("body").addClass("loading");
},
success:function(data){
$("tbody").html(data);
$("body").removeClass("loading");
}
});
}
and i have a loading div
<div class="mod">
<h1>Progress : <input type="text" id="percents"></span>
</div>
on my backend file , i fetch the result using foreach loop on tbody
inside that tbody , i increment a $counter then calculate the percentage using
$percent = ($conteur/$total) * 100;
Now, when i write javascript code inside the loop , like alert or console.log it works perfectly and display the percentage progress
while($row1=mysql_fetch_array($rs1)){
$conteur++;
$percent = ($conteur/$total) * 100;
$cust_perc=$percent;?>
<script>document.getElementById("percents").value = <?php echo $cust_perc ?>+" %";</script>
<tr>
<th>Centrale</th>
<td><?php echo $row1[5];?></td>
<td><?php echo $row1[0];?></td>
<td><?php echo $row1[1];?></td>
<td><?php echo $row1[2];?></td>
<td><?php echo ($row1[4]/1000)." T"; $tonnage+=($row1[4]/1000);
$tonnage_roch+=($row1[4]/1000);?></td>
<td>-</td>
<td><?php echo $row1[3];?></td>
<td>-</td>
<td><?php echo $row1[6];?></td>
<td><?php echo $row1[7];?></td>
<td>-</td>
<td>-</td>
</tr>
<?php
} ?>
but when i try to make change in my loading div input , mytable looks endomaged and no changes done !!
can someone has an idea please ?
Logically it will go like this:
$('#percents').val('<?php echo $percent; ?>');
but the information you provided in question is very less to be sure.

Deleting row from mysql using jquery and php

I want to create delete feature using function and jquery
My jquery works and show messages but nothing happen "Nothing Deleted"
Jquery Code
<script type="text/javascript">
$(".remove").click(function(){
var id = $(this).parents("tr").attr("id");
if(confirm('Are you sure to remove this record?'))
{
$.ajax({
url: 'delete.php',
type: 'GET',
data: {id: id},
error: function() {
alert('Something is wrong');
},
success: function(data) {
$("#"+id).remove();
alert("Record removed successfully");
}
});
}
});
PHP Function Code
function delete($table,$id) {
global $connect;
mysqli_query($connect, "DELETE FROM `$table` WHERE `id` = $id ");
}
Delete.php Code
include ('function.php');
$id = $_GET['id'];
$table = 'msg';
delete($table,$id);
HTML Code
<table class="table table-striped" style="background-color: #ffffff;">
<tr>
<th>ID</th>
<th>From</th>
<th>Title</th>
<th>Date</th>
<th>Action</th>
</tr>
<?php
$i = '1';
$username = $user_data['username'];
$query = "SELECT * FROM msg WHERE `go_to` = '$username' Order by id";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_assoc($result))
{
?>
<tr>
<td><?php echo $i++; ?></td>
<td><?php echo $row['come_from']; ?></td>
<td>
<a href="read_message/<?php echo $row['id']; ?>"><?php if(count_msg_not_opened($username, $row['id']) > '0')
{
echo $row['title'];
}
else
{
echo '<b>' . $row['title'] . '</b>';
} ?></a></td>
<td><?php echo $row['date']; ?></td>
<td>
<button class="btn btn-danger btn-sm remove">Delete</button>
</td>
</tr>
<?php } ?>
</table>
I also include "jquery.min.js"
When I press "Delete" bottom this message appears "Are you sure to remove this record?"
I pressed "Yes" then this message appears "Record removed successfully", but nothing was deleted.
I don't know where the problem is.
You forgot to add the id attribute to the <tr>
<tr id="<?php echo $row['id']; ?>">
You should also add error checking and prepared statements to your PHP code.
Are you sure that you have connected your PHP-code to your SQL-database?
function delete($table,$id) {
global $connect;
mysqli_query($connect, "DELETE FROM `$table` WHERE `id` = $id ");
}
The code above is relying on a connection already existing within your PHP-file. See this to find out how to apply a connection.

Running a php function when dropbox on change event and returns a table from the php function

I have the following code for a dropbox;
<select name="Symptom" id="Symptomid" onchange="LSC()">
On change in the dropbox i want to run the following php code;
<?php
$data = array();
{
$symptoms_name = $_POST['Symptom'];
$sql1 = mysql_query("SELECT name,description , comments
FROM symptoms WHERE symptoms.name ='$symptoms_name'") or
die(mysql_error());
while($row1 = mysql_fetch_assoc($sql1)){
$data[] = $row1;
}
}
?>
<?php
if($data){
?>
<table border="1">
<tr>
<td>name</td>
<td>description</td>
<td>comments</td>
</tr>
<?php
if($data){
foreach($data as $sy){
?>
<tr>
<td><?php echo $sy['name']; ?> </td>
<td><?php echo $sy['description']; ?> </td>
<td><?php echo $sy['comments']; ?> </td>
</tr>
<?php
}
}
?>
<?php
}
?>
</table>
}
and display this table under the dropbox on the original html .
I think we have to run a java script which will call the php function and retun the table to the original html.
Kindly assist, I know we have to use ajax.
Regards
Azhar
sorted,
see this has a similar problem
http://www.w3schools.com/php/php_ajax_database.asp
Regards
Azhar

Click function showing div elements when not clicked out

I have an admin panel that I am creating. I have a left panel section and then the right side which shows the div when the panel button is clicked. I created a fiddle to show what it looks like and to help me explain this...
https://jsfiddle.net/jq8c51c9/
In the Fiddle it works just like it should, but I took out all of my php. The problem is around the Announcements div, it shows the div for the League Dues under it. Also once you click on announcements and then click on another panel button, if I click on Announcements again the only thing that will show up is this..
Announcements Current Announcements
League Dues
Again this is NOT doing this in the Fiddle.
Here is the full code for the area that the issue resides in. I have been stuck on this forever and cannot figure out why I am having difficulties with only these two divs.
Does anyone see what it is that I am doing wrong?
Announcements
try {
//Prepare
$con = mysqli_connect("localhost", "", "", "");
if ($user_stmt = $con->prepare("SELECT `id` FROM users")) {
$user_stmt->execute();
$user_stmt->bind_result($user_id);
if (!$user_stmt) {
throw new Exception($con->error);
}
$user_stmt->store_result();
$user_result = array();
//while ($user_row = $user_stmt->fetch()) {
?>
<div class="announcement_success"></div>
<p>Add New Announcement</p>
<form action="" method="POST" id="insert_announcements">
<input type="hidden" value="<?php echo $userid; ?>" id="approved_id" name="user_id" />
<textarea rows="4" cols="50" id="announcement_message" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
<label for="contactButton">
<button type="button" class="contactButton" id="submit_announcement">Add Announcement</button>
</label>
</form>
<?php
if ($announcements_stmt = $con->prepare("SELECT * FROM announcements")) {
$announcements_stmt->execute();
$announcements_stmt->bind_result($announcements_id, $announcements_user_id, $announcements_messages, $announcements_date);
if (!$announcements_stmt) {
throw new Exception($con->error);
}
$announcements_stmt->store_result();
$announcements_result = array();
?>
Current Announcements
<table>
<tr>
<th>ID</th>
<th>Username</th>
<th>Message</th>
<th>Date</th>
</tr>
<?php
while ($row = $stmt->fetch()) {
?>
<tr>
<td><?php echo $announcements_id; ?></td>
<td><?php echo $announcements_username; ?></td>
<td><?php echo $announcements_messages; ?></td>
<td><?php echo $announcements_date; ?></td>
</tr>
</table>
<?php
}
}
}
}
catch (Exception $e)
{
echo "Error: " . $e->getMessage();
}
?>
</div>
<div id='dues'>League Dues</div>
</div>
You have an error when building the announcement-table.
The closing </table> tag is inside the while loop, so the html will be screwed up, making everything after the closed table disappear.
So change the while loop to:
....
<?php
while ($row = $stmt->fetch()) {
?>
<tr>
<td><?php echo $announcements_id; ?></td>
<td><?php echo $announcements_username; ?></td>
<td><?php echo $announcements_messages; ?></td>
<td><?php echo $announcements_date; ?></td>
</tr>
<?php
}
?>
</table>
<?php
....
Anyway, I recommend to build your html first in a variable and echo it out later alltogether. That makes cleaner code and reduces risk of inconsitency of html tags. When using with HEREDOC you even don't have to bother about quotes.
In your case that could for example look like that:
<?php
$table_head = <<<EOT
<tr>
<th>ID</th>
<th>Username</th>
<th>Message</th>
<th>Date</th>
</tr>
EOT;
$table_content = "";
while ($row = $stmt->fetch()) {
$table_content.= <<<EOT
<tr>
<td>$announcements_id</td>
<td>$announcements_username</td>
<td>$announcements_messages</td>
<td>$announcements_date</td>
</tr>
EOT;
}
$announcement_table = "<table>".$table_head.$table_content."</table>";
echo $announcement_table;

Categories

Resources