How to Insert Multiple Rows with Ajax,Jquery in PHP MySQL?
When “How to Insert Multiple Rows with Ajax,Jquery in PHP MySQL?” moves through design, development and browser testing, open enrollment can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.
For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.
Apr 05, 2022
Hi friends,
In this post, we will learn How to Insert Multiple Rows with Ajax,Jquery in PHP MySQL. i explained simply step by step Multiple jQuery table data insert in database PHP. Here you will learn how to Multiple Inline Insert into Mysql using Ajax JQuery in PHP. This tutorial will give you simple example of Php Mysql Ajax Insert Multiple row.
I will give you simple Example of How to Insert Multiple Data using PHP Ajax.
So let's see bellow example:
index.php
<!DOCTYPE html>
<html>
<head>
<title>How to Insert Multiple Rows with Ajax,Jquery in PHP MySQL</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-11">
<h2 class="text-center">How to Insert Multiple Rows with Ajax,Jquery in PHP MySQL</h2>
</div>
<div class="col-md-1 mt-2">
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#myModal"><i class="fa fa-plus-square-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div class="card-body">
<div id="inserted_item_data" class="mt-2"></div>
<div class="modal" id="myModal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Insert Multiple Row</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<table class="table text-center table-striped table-bordered" id="crud_table">
<tr>
<th>Name</th>
<th>Email</th>
<th>mobile</th>
<th>message</th>
<th><button type="button" name="add" id="add" class="btn btn-success">+</button></th>
</tr>
<tr>
<td contenteditable="true" class="name"></td>
<td contenteditable="true" class="email"></td>
<td contenteditable="true" class="mobile"></td>
<td contenteditable="true" class="message text-start"></td>
<td><button type='button' name='remove' data-row='row1' class='btn btn-danger btn-xs remove'>-</button></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" name="save" id="save" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var count = 1;
$('#add').click(function(){
count = count + 1;
var html_code = "<tr id='row"+count+"'>";
html_code += "<td contenteditable='true' class='name'></td>";
html_code += "<td contenteditable='true' class='email'></td>";
html_code += "<td contenteditable='true' class='mobile'></td>";
html_code += "<td contenteditable='true' class='message text-start'></td>";
html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>";
html_code += "</tr>";
$('#crud_table').append(html_code);
});
$(document).on('click', '.remove', function(){
$(this).parent().parent().remove();
});
$('#save').click(function(){
var name = [];
var email = [];
var mobile = [];
var message = [];
$('.name').each(function(){
name.push($(this).text());
});
$('.email').each(function(){
email.push($(this).text());
});
$('.mobile').each(function(){
mobile.push($(this).text());
});
$('.message').each(function(){
message.push($(this).text());
});
$.ajax({
url:"insert.php",
method:"POST",
data:{name:name, email:email, mobile:mobile, message:message},
success:function(data){
alert(data);
$("td[contentEditable='true']").text("");
for(var i=2; i<= count; i++){
$('tr#'+i+'').remove();
}
fetch_item_data();
}
});
});
function fetch_item_data(){
$.ajax({
url:"fetch.php",
method:"POST",
success:function(data){
$('#inserted_item_data').html(data);
}
})
}
fetch_item_data();
});
</script>
</body>
</html>insert.php
<?php
$connect = mysqli_connect("localhost", "root", "", "aatman");
if(isset($_POST["name"]))
{
$name = $_POST["name"];
$email = $_POST["email"];
$mobile = $_POST["mobile"];
$message = $_POST["message"];
$query = '';
for($count = 0; $count<count($name); $count++){
$name_clean = mysqli_real_escape_string($connect, $name[$count]);
$email_clean = mysqli_real_escape_string($connect, $email[$count]);
$mobile_clean = mysqli_real_escape_string($connect, $mobile[$count]);
$message_clean = mysqli_real_escape_string($connect, $message[$count]);
if($name_clean != '' && $email_clean != '' && $mobile_clean != '' && $message_clean != ''){
$query .= 'INSERT INTO users(name, email, mobile, message) VALUES("'.$name_clean.'", "'.$email_clean.'", "'.$mobile_clean.'", "'.$message_clean.'");';
}
}
if($query != ''){
if(mysqli_multi_query($connect, $query)){
echo 'Users Data Inserted successfully';
}else{
echo 'Error';
}
}else{
echo 'All Fields are Required';
}
}
?>fetch.php
<?php
$connect = mysqli_connect("localhost", "root", "", "aatman");
$query = "SELECT * FROM users ORDER BY id DESC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<body>
<div class="container">
<table class="table text-center table-striped table-bordered">
<tr>
<th>Name</th>
<th>Email</th>
<th>mobile</th>
<th>message</th>
</tr>
<?php
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>".$row["name"]."</td>";
echo "<td>".$row["email"]."</td>";
echo "<td>".$row["mobile"]."</td>";
echo "<td class='text-start'>".$row["message"]."</td>";
echo "</tr>";
}
?>
</table>
</div>
</body>
</html>Output:
I hope it will help you....
- How to Show Loading Spinner in JQuery?
- How to Create Ajax Submit Form Using jQuery?
- How To Get Current Page URL, Path, Host and hash using jQuery?
- How To Get, Set and Delete Div Background Image jQuery?
- JQuery Remove All Unwanted Whitespace From String Example
- Body Background Video Using Vide Jquery Example
- JQuery UI Autocomplete Example
- JQuery Split String By Comma Into Array Example