PHP Ajax Update Data in MySQL By Using Bootstrap Modal

February 9, 2022 XpertPhp

In this tutorial, we will explain to you how to PHP ajax update 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");

Update 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 update 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 Update 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 Update 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="15%">Edit</th>
                            <th width="15%">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="edit" value="Edit" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs edit_data" /></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>
	
	<!-- Update data-->
    <div class="modal fade" id="updateDataModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Update 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>
					<input type="hidden" name="note_id" id="note_id" />
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" id="update_detail" class="btn btn-primary" value="Update">Update</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();
                        });
                    }
                }
            });
        });
		// view
        $(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');
                }
            });
        });
		// fetch
		$(document).on('click', '.edit_data', function(){  
           var note_id = $(this).attr("id");  
           $.ajax({  
                url:"update.php",  
                method:"POST",  
                data:{fetch: 1,note_id:note_id},  
                dataType:"json",  
                success:function(data){  
                     $('#updateDataModal #txtTitle').val(data.title);  
                     $('#updateDataModal #txtDescription').val(data.description);  
                     $('#updateDataModal #note_id').val(data.id);  
                     $('#updateDataModal').modal('show');  
                }  
           });  
        });
		// update
		$(document).on("click", "#update_detail", function() {
            var title = $('#updateDataModal #txtTitle').val();
            var description = $('#updateDataModal #txtDescription').val();
            var note_id = $('#updateDataModal #note_id').val();
            $.ajax({
                url: "update.php",
                type: "POST",
                catch: false,
                data: {
                    updated: 1,
                    title: title,
                    description: description,
                    note_id: note_id
                },
                success: function(dataResult) {
                    var dataResult = JSON.parse(dataResult);
                    if (dataResult.status == 1) {
                        $('#updateDataModal').modal().hide();
                        swal("Note successfully Updated!", {
                            icon: "success",
                        }).then((result) => {
                            location.reload();
                        });
                    }
                }
            });
        });		

    });
</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

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

<!DOCTYPE html>

<head>

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

</head>

<body>

<h3 align="center">PHP Ajax Update 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="edit" value="Edit" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs edit_data" /></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>

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

<h5 class="modal-title">Update 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>

<button type="submit" id="update_detail" class="btn btn-primary" value="Update">Update</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();

});

}

});

// view

$(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');

}

});

// fetch

$(document).on('click', '.edit_data', function(){

var note_id = $(this).attr("id");

$.ajax({

url:"update.php",

method:"POST",

data:{fetch: 1,note_id:note_id},

dataType:"json",

success:function(data){

$('#updateDataModal #txtTitle').val(data.title);

$('#updateDataModal #txtDescription').val(data.description);

$('#updateDataModal #note_id').val(data.id);

$('#updateDataModal').modal('show');

}

});

// update

$(document).on("click", "#update_detail", function() {

var title = $('#updateDataModal #txtTitle').val();

var description = $('#updateDataModal #txtDescription').val();

var note_id = $('#updateDataModal #note_id').val();

$.ajax({

url: "update.php",

type: "POST",

catch: false,

data: {

updated: 1,

title: title,

description: description,

note_id: note_id

success: function(dataResult) {

var dataResult = JSON.parse(dataResult);

if (dataResult.status == 1) {

$('#updateDataModal').modal().hide();

swal("Note successfully Updated!", {

icon: "success",

}).then((result) => {

location.reload();

});

}

});

</script>

update.php

<?php 

include('config.php');
// Update Data
if(isset($_POST['updated'])){
    $title = $_POST['title'];
    $description = $_POST['description'];
    $query = "UPDATE notes SET title='".$title."',description='".$description."' WHERE id = '".$_POST["note_id"]."'";
    if (mysqli_query($con,$query)){
        echo json_encode(array("status" => 1));
    }
    else{
        echo json_encode(array("status"=>2));
    }
}
// Fetch Data
if(isset($_POST["fetch"]) && isset($_POST["note_id"]))  
 {  
      $output = '';  
      $query = "SELECT * FROM notes WHERE id = '".$_POST["note_id"]."'";  
      $result = mysqli_query($con, $query);  
      $row = mysqli_fetch_array($result);  
      echo json_encode($row);
 }  
?>

<?php

include('config.php');

// Update Data

if(isset($_POST['updated'])){

$title = $_POST['title'];

$description = $_POST['description'];

$query = "UPDATE notes SET title='".$title."',description='".$description."' WHERE id = '".$_POST["note_id"]."'";

if (mysqli_query($con,$query)){

echo json_encode(array("status" => 1));

}

else{

echo json_encode(array("status"=>2));

}

// Fetch Data

if(isset($_POST["fetch"]) && isset($_POST["note_id"]))

{

$output = '';

$query = "SELECT * FROM notes WHERE id = '".$_POST["note_id"]."'";

$result = mysqli_query($con, $query);

$row = mysqli_fetch_array($result);

echo json_encode($row);

}

Download

Please follow and like us:

Create Database in table

Connect to Database

Update data using ajax in bootstrap modal

Related posts: