How to Store data without page reload in database using jquery ajax in php
Save data without page refresh using ajax in php
Hello Guys., so in this above video, we are learning about how to Store data without page reload in database using jquery ajax in php.
So.. Let's get started, as we have can follow the Video template where we are using Bootstrap for designing the view. goto getbootstrap.com and copy the starter template and continue with below code:
Step 1: Create a table named students below code:
Create a table as per below code in your database:
CREATE TABLE students (
id int,
fname varchar(100),
lname varchar(100),
class varchar(100),
section varchar(100)
);
Step 2: Create a file named index.php and paste the below code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>PHP - AJAX - CRUD</title>
</head>
<body>
<!-- Add Modal -->
<div class="modal fade" id="Student_AddModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Student Data using jQuery Ajax in php without page reload</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="error-message">
</div>
</div>
<div class="col-md-6">
<label for="">First Name</label>
<input type="text" class="form-control fname">
</div>
<div class="col-md-6">
<label for="">Last Name</label>
<input type="text" class="form-control lname">
</div>
<div class="col-md-6">
<label for="">Class</label>
<input type="text" class="form-control class">
</div>
<div class="col-md-6">
<label for="">Section</label>
<input type="text" class="form-control section">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary student_add_ajax">Save</button>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4>
PHP - AJAX - CRUD | Data without page reload using jquery ajax in php.
<button type="button" class="btn btn-primary float-right" data-toggle="modal" data-target="#Student_AddModal">
Add
</button>
</h4>
</div>
<div class="card-body">
<div class="message-show">
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Class</th>
<th>Section</th>
<th>Action</th>
</tr>
</thead>
<tbody class="studentdata">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
getdata();
$('.student_add_ajax').click(function (e) {
e.preventDefault();
var fname = $('.fname').val();
var lname = $('.lname').val();
var stu_class = $('.class').val();
var section = $('.section').val();
if(fname != '' & lname !='' & stu_class !='' & section !='')
{
$.ajax({
type: "POST",
url: "ajax-crud/code.php",
data: {
'checking_add':true,
'fname': fname,
'lname': lname,
'class': stu_class,
'section': section,
},
success: function (response) {
// console.log(response);
$('#Student_AddModal').modal('hide');
$('.message-show').append('\
<div class="alert alert-success alert-dismissible fade show" role="alert">\
<strong>Hey!</strong> '+response+'.\
<button type="button" class="close" data-dismiss="alert" aria-label="Close">\
<span aria-hidden="true">×</span>\
</button>\
</div>\
');
$('.studentdata').html("");
getdata();
$('.fname').val("");
$('.lname').val("");
$('.class').val("");
$('.section').val("");
}
});
}
else
{
// console.log("Please enter all fileds.");
$('.error-message').append('\
<div class="alert alert-warning alert-dismissible fade show" role="alert">\
<strong>Hey!</strong> Please enter all fileds.\
<button type="button" class="close" data-dismiss="alert" aria-label="Close">\
<span aria-hidden="true">×</span>\
</button>\
</div>\
');
}
});
});
</script>
</body>
</html>
Step 3: Create a file named code.php inside ajax-crud and paste the below code:
<?php
$conn = mysqli_connect("localhost","root","","phpcrud");
if(isset($_POST['checking_add']))
{
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$class = $_POST['class'];
$section = $_POST['section'];
$query = "INSERT INTO students (fname,lname,class,section) VALUES ('$fname','$lname','$class','$section')";
$query_run = mysqli_query($conn, $query);
if($query_run)
{
echo $return = "Successfully Stored";
}
else
{
echo $return = "Something Went Wrong.!";
}
}
?>
Thanks for reading.