XpertPhp
08-Feb-2022
289
In this tutorial, we will explain to you how to PHP ajax insert data in MySQL by using bootstrap modal. so we will give you a simple example of how to insert data using PHP Ajax.
sometimes we need to show dynamic data from the database to Bootstrap Modal by using PHP with Ajax Jquery. Bootstrap Modal is a popup window or dialog box displayed at the top of the website. Bootstrap Modal is used to display dynamic data from the database in the popup dialog box, in Bootstrap Modal we can also create forms, so we can easily create a bootstrap modal using the bootstrap CDN.
Create Database in table
CREATE TABLE `notes` (
`id` int(11) NOT NULL,
`title` varchar(165) NOT NULL,
`description` text NOT NULL,
`created_at` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 AUTO_INCREMENT=1;
Connect to Database
In this step, we will create a new config.php file. The code below is to provides how to connect with the database.
The following code is used to connect MySQL from PHP. It requires hostname, database username, database password, and database name.
config.php
<?php
$con = mysqli_connect("localhost","root","","testdb");
?>
Insert data using ajax in bootstrap modal
In this example, We will Create an index.php PHP file. after then we will paste the below code into our file.
We will create the HTML form in bootstrap modal after then pass the insert data using the ajax.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP Ajax Insert Data in MySQL By Using Bootstrap Modal - XpertPhp</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
</head>
<body>
<div class="container">
<h3 align="center">PHP Ajax Insert Data in MySQL By Using Bootstrap Modal</h3>
<br />
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="table-responsive">
<div align="right">
<button type="button" class="btn btn-primary text-right m-5" data-toggle="modal" data-target="#addDataModal">Add</button>
</div>
<br />
<div id="employee_table">
<table class="table table-bordered">
<tr>
<th width="70%">Title</th>
<th width="30%">View</th>
</tr>
<?php
include('config.php');
$query = mysqli_query($con, "SELECT * FROM notes ORDER BY ID DESC");
while ($row = mysqli_fetch_array($query)) { ?>
<tr>
<td><?php echo $row['title'] ?></td>
<td><input type="button" name="view" value="view" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php } ?>
</table>
</div>
</div>
</div>
</div>
<!-- Add Data Modal -->
<div class="modal fade" id="addDataModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Add Notes</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="form-group">
<label for="txtTitle">Title</label>
<input type="text" class="form-control" id="txtTitle" name="txtTitle">
</div>
<div class="form-group">
<label for="txtDescription"> Description</label>
<textarea class="form-control" id="txtDescription" name="txtDescription" rows="3"></textarea>
</div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="add_data" class="btn btn-primary" value="Add">Add</button>
</div>
</div>
</div>
</div>
</div>
<!-- View Data Modal-->
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Note Details</h4>
</div>
<div class="modal-body" id="note_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function() {
// add
$(document).on("click", "#add_data", function() {
var title = $('#txtTitle').val();
var description = $('#txtDescription').val();
$.ajax({
url: "insert.php",
type: "POST",
catch: false,
data: {
added: 1,
title: title,
description: description
},
success: function(dataResult) {
var dataResult = JSON.parse(dataResult);
if (dataResult.status == 1) {
$('#addDataModal').modal().hide();
swal("Note successfully Inserted!", {
icon: "success",
}).then((result) => {
location.reload();
});
}
}
});
});
$(document).on('click', '.view_data', function() {
var note_id = $(this).attr("id");
$.ajax({
url: "insert.php",
method: "POST",
data: {
note_id: note_id
},
success: function(data) {
$('#note_detail').html(data);
$('#dataModal').modal('show');
}
});
});
});
</script>
insert.php
<?php
include('config.php');
// Add Data
if(isset($_POST['added'])){
$title = $_POST['title'];
$description = $_POST['description'];
$query = "INSERT INTO notes(title,description,created_at) VALUES ('$title','$description',NOW())";
if (mysqli_query($con,$query)){
echo json_encode(array("status" => 1));
}
else{
echo json_encode(array("status"=>2));
}
}
// View Data
if(isset($_POST["note_id"]))
{
$output = '';
$query = "SELECT * FROM notes WHERE id = '".$_POST["note_id"]."'";
$result = mysqli_query($con, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td width="30%"><label>Name</label></td>
<td width="70%">'.$row["title"].'</td>
</tr>
<tr>
<td width="30%"><label>Description</label></td>
<td width="70%">'.$row["description"].'</td>
</tr>
<tr>
<td width="30%"><label>Date</label></td>
<td width="70%">'.$row["created_at"].'</td>
</tr>
';
}
$output .= '
</table>
</div>
';
echo $output;
}
?>
Search
Tools
Category
Latest Post
Popular Post
- Angular 10 – Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’
- Php Login And Registration Example
- Codeigniter 3 Deprecated dynamic properties in PHP 8.2
- PHP Registration with Email Verification using OTP
- Laravel 11 Ajax CRUD Example
- Laravel 12 Ajax CRUD Example
- Angular 15 CRUD Application Example Tutorial
- How to add multiple markers in google maps using Codeigniter