PHP Ajax Insert Data in MySQL By Using Bootstrap Modal

February 8, 2022 XpertPhp

In this tutorial, we will explain to you how to PHP ajax insert data in MySQL by using bootstrap modal.

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;

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");
?>

<?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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<!DOCTYPE html>

<head>

<title>PHP Ajax Insert Data in MySQL By Using Bootstrap Modal - XpertPhp</title>

</head>

<body>

<h3 align="center">PHP Ajax Insert Data in MySQL By Using Bootstrap Modal</h3>

<br />

</div>

</div>

<br />

<tr>

<th width="70%">Title</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><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>

<h5 class="modal-title" id="staticBackdropLabel">Add Notes</h5>

</button>

</div>

<label for="txtTitle">Title</label>

</div>

<label for="txtDescription"> Description</label>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

<h4 class="modal-title">Note Details</h4>

</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</body>

</html>

$(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;  
 }  
?>

<?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 .= '

<table class="table table-bordered">';

while($row = mysqli_fetch_array($result))

{

$output .= '

<tr>

<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="70%">'.$row["created_at"].'</td>

</tr>

}

$output .= '

</table>

</div>

echo $output;

}

Download

Please follow and like us:

Create Database in table

Connect to Database

Insert data using ajax in bootstrap modal

Related posts: