Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
Database Table
CREATE TABLE `members` (
`id` int(11) NOT NULL,
`firstname` varchar(30) NOT NULL,
`lastname` varchar(30) NOT NULL,
`address` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `members`
ADD PRIMARY KEY (`id`);
ALTER TABLE `members`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
index.php
//index.php
<!DOCTYPE html>
<html>
<head>
<title>Submit Form using Jquey AJAX with PHP MySQLi</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="card card-body bg-light">
<div class="row">
<div class="col-lg-12">
<h2><center>Submit Form using Jquey AJAX with PHP MySQLi</center></h2>
</div>
</div>
<form id="form">
<div class="row">
<div class="mb-3">
<label class="form-label">Firstname:</label>
<input type="text" name="firstname" class="form-control">
</div>
</div>
<div class="row">
<div class="mb-3">
<label class="form-label">Lastname:</label>
<input type="text" name="lastname" class="form-control">
</div>
</div>
<div class="row">
<div class="mb-3">
<label class="form-label">Address:</label>
<input type="text" name="address" class="form-control">
</div>
</div>
</form>
<div class="row">
<div class="col-lg-12">
<button type="button" class="btn btn-primary pull-right" id="submit">Submit</button>
</div>
</div>
</div>
<div class="row" style="margin-top:20px;">
<div id="table">
</div>
</div>
</div>
<script>
$(document).ready(function(){
showTable();
$('#submit').click(function(){
var form=$('#form').serialize();
$.ajax({
url:"add.php",
method:"POST",
data:form,
success:function(){
showTable();
$('#form')[0].reset();
}
});
});
});
function showTable(){
$.ajax({
url:"fetch.php",
method:"POST",
data:{
fetch: 1,
},
success:function(data){
$('#table').html(data);
}
});
}
</script>
</body>
</html>
conn.php
//conn.php
<?php
$conn = mysqli_connect("localhost","root","","testingdb");
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
fetch.php
//fetch.php
<?php
include('conn.php');
if(isset($_POST['fetch'])){
?>
<table class="table table-bordered table-striped">
<thead>
<th>Firstname</th>
<th>Lastname</th>
<th>Address</th>
</thead>
<tbody>
<?php
$query=mysqli_query($conn,"select * from members order by id desc");
while($row=mysqli_fetch_array($query)){
?>
<tr>
<td><?php echo $row['firstname']; ?></td>
<td><?php echo $row['lastname']; ?></td>
<td><?php echo $row['address']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
}
?>
add.php
//add.php
<?php
include('conn.php');
if(isset($_POST['firstname'])){
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
$address=$_POST['address'];
mysqli_query($conn,"insert into members (firstname, lastname, address) values ('$firstname', '$lastname', '$address')");
}
?>
