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 `multiplerow_members` (
`id` int(11) NOT NULL,
`firstname` varchar(30) NOT NULL,
`lastname` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `multiplerow_members` (`id`, `firstname`, `lastname`) VALUES
(1, 'Airi ', 'Sato'),
(2, 'Bourto', 'Usumaki');
ALTER TABLE `multiplerow_members`
ADD PRIMARY KEY (`id`);
ALTER TABLE `multiplerow_members`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
index.php
//index.php
<!DOCTYPE html>
<html>
<head>
<title>Jquery Ajax Adding Multiple Rows with PHP OOP and 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="row">
<div class="col-md-12">
<h2>Jquery Ajax Adding Multiple Rows with PHP OOP and Mysqli</h2>
<h2>Members Table</h2>
<div id="table"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h2>Add Form</h2>
<form id="addForm">
<hr>
<div class="row">
<div class="col-md-2">
<label style="position:relative; top:7px;">Firstname:</label>
</div>
<div class="col-md-10">
<input type="text" name="firstname[]" class="form-control">
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-md-2">
<label style="position:relative; top:7px;">Lastname:</label>
</div>
<div class="col-md-10">
<input type="text" name="lastname[]" class="form-control">
</div>
</div>
<hr>
<div id="newrow"></div>
<div class="row">
<div class="col-md-12">
<button type="button" id="save" class="btn btn-primary"> Save</button>
<button type="button" id="newbutton" class="btn btn-primary"> Add New</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function(){
showTable();
$('#newbutton').click(function(){
$('#newrow').slideDown();
var newrow = '<hr>';
newrow = '<div class="row">';
newrow += '<div class="col-md-2"><label style="position:relative; top:7px;">Firstname:</label></div>';
newrow += '<div class="col-md-10"><input type="text" name="firstname[]" class="form-control"></div>';
newrow += '</div>';
newrow += '<div style="height:10px;"></div>';
newrow += '<div class="row">';
newrow += '<div class="col-md-2"><label style="position:relative; top:7px;">Lastname:</label></div>';
newrow += '<div class="col-md-10"><input type="text" name="lastname[]" class="form-control"></div>';
newrow += '</div>';
newrow += '<hr>';
$('#newrow').append(newrow);
});
$('#save').click(function(){
var addForm = $('#addForm').serialize();
$.ajax({
type: 'POST',
url: 'add.php',
data: addForm,
success:function(data){
if(data==''){
showTable();
$('#addForm')[0].reset();
$('#newrow').slideUp();
$('#newrow').empty();
}
else{
showTable();
$('#addForm')[0].reset();
$('#newrow').slideUp();
$('#newrow').empty();
alert('Rows with empty field are not added');
}
}
});
});
});
function showTable(){
$.ajax({
type: 'POST',
url: 'fetch.php',
data:{
fetch: 1,
},
success:function(data){
$('#table').html(data);
}
});
}
</script>
</body>
</html>
conn.php
//conn.php
<?php
$conn = new mysqli("localhost", "root", "", "testingdb");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
add.php
//add.php
<?php
include('conn.php');
if(isset($_POST['firstname'])){
$firstname = $_POST["firstname"];
$lastname = $_POST["lastname"];
for($count = 0; $count<count($firstname); $count++){
$firstname_clean = mysqli_real_escape_string($conn, $firstname[$count]);
$lastname_clean = mysqli_real_escape_string($conn, $lastname[$count]);
if($firstname_clean != '' && $lastname_clean != ''){
$conn->query("insert into multiplerow_members (firstname, lastname) values ('".$firstname_clean."', '".$lastname_clean."')");
}
else{
echo "1";
}
}
}
?>
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>
</thead>
<tbody>
<?php
include('conn.php');
$query=$conn->query("select * from multiplerow_members");
while($row=$query->fetch_array()){
?>
<tr>
<td><?php echo $row['firstname']; ?></td>
<td><?php echo $row['lastname']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
}
?>
