Delete Sweetalert

How to delete Table Row using Sweetalert2

Source code

api.php

								
									<?php
									//connection
									$conn = new mysqli('localhost', 'root', '', 'mydatabase');

									$action = 'fetch';

									if(isset($_GET['action'])){
										$action = $_GET['action'];
									}

									if($action == 'fetch'){
										$output = '';
										$sql = "SELECT * FROM members order by id desc";
										$query = $conn->query($sql);
										$cnt=1;
										while($row = $query->fetch_assoc()){
											$output .= "
											<tr>
											<td>". $cnt."</td>
											<td>".$row['firstname']."</td>
											<td>".$row['lastname']."</td>
											<td>".$row['address']."</td>
											<td><button class='btn btn-sm btn-danger delete_product' data-id='".$row['id']."'>Delete</button></td>
											</tr>
											";
											$cnt=$cnt+1;
										}

										echo json_encode($output);
									}

									if($action == 'delete'){
										$id = $_POST['id'];
										$output = array();
										$sql = "DELETE FROM members WHERE id = '$id'";
										if($conn->query($sql)){
											$output['status'] = 'success';
											$output['message'] = 'Member deleted successfully';
										}
										else{
											$output['status'] = 'error';
											$output['message'] = 'Something went wrong in deleting the member';
										}

										echo json_encode($output);

									} ?>

								
							

index.php

								
									<!DOCTYPE html>
									<html>
									<head>
										<meta charset="utf-8">
										<title>How to Delete Table Row using Sweetalert2 with PHP/MySQLi</title>
										<link rel="stylesheet" type="text/css" href="asset/bootstrap/css/bootstrap.min.css">
										<link rel="stylesheet" type="text/css" href="asset/sweet_alert/sweetalert2.min.css">
										<!--Bootstrap -->
										<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
										<style type="text/css">
											.mt20{
												margin-top:20px;
											}
										</style>
									</head>
									<body>
										<div class="container">
											<h3 class="text-center mt20 mb5">How to delete Table Row using Sweetalert2</h3>
											<div class="card col-md-6 my-6 ">
												<form class="forms-sample" method="post" enctype="multipart/form-data" class="form-horizontal">

													<div class="row ">
														<div class="form-group col-md-12">
															<label >First Name</label>
															<input type="text" type="text" id="name" name="name" placeholder="First name"  class="form-control" required />
														</div>
													</div>
													<div class="row ">
														<div class="form-group col-md-12">
															<label >Last Name</label>
															<input type="text" id="lastname" name="lastname" placeholder="Enter Last name"  class="form-control" required />
														</div>
													</div>
													<div class="row ">
														<div class="form-group col-md-12">
															<label >Address</label>
															<input type="text" id="address" name="address" placeholder="Enter Address"  class="form-control" required />
														</div>
													</div>
													<button type="submit" name="submit" value="Submit"  class="btn btn-primary  mr-2 mb-4">Save</button>
												</form>
												
											</div>
											<div class="row col-md-12 ">
												<table class="table table-bordered mt20">
													<thead>
														<th>No.</th>
														<th>Firstname</th>
														<th>Lastname</th>
														<th>Address</th>
														<th>Action</th>
													</thead>
													<tbody id="tbody">

													</tbody>
												</table>
											</div>
										</div>

										<script src="asset/jquery.min.js"></script>
										<script src="asset/bootstrap/js/bootstrap.min.js"></script>
										<script src="asset/sweet_alert/sweetalert2.min.js"></script>
										<?php
										session_start();
										error_reporting(0);
										$conn = new mysqli('localhost', 'root', '', 'mydatabase');
										if(isset($_POST['submit']))
										{
											$name=$_POST['name'];
											$lastname=$_POST['lastname'];
											$address=$_POST['address'];
											$query=mysqli_query($conn,"insert into members(firstname,lastname,address) values('$name','$lastname', '$address')");
											if($query)
											{
												?>
												<script >
													swal.fire({
														'title': 'Thank you',
														'text': 'Saved successfuly',
														'icon': 'success',
														'type': 'success'
													})
												</script>
												<?php	  
											}
											else
											{
												$_SESSION['errmsg']="Data not inserted";
											}
										}
										?>
										<script type="text/javascript">
											$(document).ready(function(){
												fetch();

												$(document).on('click', '.delete_product', function(){
													var id = $(this).data('id');

													swal.fire({
														title: 'Are you sure?',
														text: "You won't be able to revert this!",
														icon: 'warning',
														showCancelButton: true,
														confirmButtonColor: '#3085d6',
														cancelButtonColor: '#d33',
														confirmButtonText: 'Yes, delete it!',
													}).then((result) => {
														if (result.value){
															$.ajax({
																url: 'api.php?action=delete',
																type: 'POST',
																data: 'id='+id,
																dataType: 'json'
															})
															.done(function(response){
																swal.fire('Deleted!', response.message, response.status);
																fetch();
															})
															.fail(function(){
																swal.fire('Oops...', 'Something went wrong with ajax !', 'error');
															});
														}

													})

												});
											});

											function fetch(){
												$.ajax({
													method: 'POST',
													url: 'api.php',
													dataType: 'json',
													success: function(response){
														$('#tbody').html(response);
													}
												});
											}
										</script>
									</body>
									</html>
								
							
Download

Comments

Christian Morgan

This is the best free learning platform that helped me to be expert.

Harry Ken

Thank you for good heart of teaching world.

Don Martins

This code worked for me, thank you

Akbar

thank you very much I am from Iran You are a real person Thank you very much for the codes And very simple but very useful, thank you

Leave a Comment:

You Might Also Like

hostel booking

Hostel booking management system
Learn More
.

car rental

Car rental management system in Php
Learn More
.

student details

Student details management system
Learn More
.

Tourism

Tourism management system in Php and Mysql
Learn More

Latest Tutorial

sweet alerts

How to delete table row using sweet alert2
Learn More

piechart

How to create piechart with Mysql data
Learn More

register and login

How to register and login in php
Learn More

edit data

How to edit Mysql data in modal using php
Learn More