August 31, 2019

Ajax Popup View, Add and Update Data Using PHP & MySQL

PHP Ajax Update MySQL Data Through Bootstrap Modal

In this article, we going to see how to add and update data using PHP & MySQL with Ajax Popup. Without webpage refresh or reload data update is a very friendly method for users this reduce the time with instance data update and viewing. In the previous article, I showed you how to update data with Ajax & PHP but in this using Ajax popup, we can view add and update data. Here we using Bootstrap framework for the popup, with that we going to insert, update, fetch the data with the database.

With the small Employee Management System, we going to Add, Edit, view the data in Bootstrap Popup with the help of Ajax and PHP. By clicking the add or edit button we display the popup by defining data attribute in an element. With the ajax popup we going to add the data with the insert query, Ajax and jQuery will help to get the employee id from the edit button and using PHP we fetch the data from the database and display in the popup. Finally, we can update the data by clicking the update button.

conn.php

<?php
$connect = mysqli_connect("localhost", "root", "", "popup_update");
?>

<?php

$connect = mysqli_connect("localhost", "root", "", "popup_update");

index.php

<?php  
 include 'conn.php'; // MySQL Connection
 $query = "SELECT * FROM emp_data ORDER BY id DESC";  
 $result = mysqli_query($connect, $query);  
 ?>
   <!DOCTYPE html>  
 <html>  
      <head>  
      <title>Ajax Popup View Add and Update Data Using PHP & MySQL - softAOX</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
       </head>  
      <body>  
     <br /><br />  
     <div class="container">  
     <h3 align="center">Ajax Popup View Add and Update Data Using PHP & MySQL</h3>
     <br />  
          <div class="table-responsive">  
               <div align="center">  
                    <button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add New Employee</button>  
               </div>  
               <br />
          <h4 align="center">Employee Data Management</h4>
               <div id="employee_table">  
               <table class="table table-striped">
                         <tr>  
                         <th width="70%">Employee Name</th>
                         <th width="10%" class="text-center">Edit</th>
                         <th width="20%" class="text-center">View Employee Details</th>
                         </tr>  
                         <?php  
                         while($row = mysqli_fetch_array($result))  
                         {  
                         ?>  
                         <tr>  
                              <td><?php echo $row["name"]; ?></td>  
                              <td class="text-center"><input type="button" name="edit" value="Edit" id="<?php echo $row["id"]; ?>" class="btn btn-info edit_data" /></td>  
                              <td class="text-center"><input type="button" name="view" value="view" id="<?php echo $row["id"]; ?>" class="btn btn-success view_data" /></td>  
                         </tr>  
                         <?php  
                         }  
                         ?>  
                    </table>  
               </div>  
          </div>  
     </div> 
     <!-- Employee Details -->
<div id="dataModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                <h4 class="modal-title">Employee Details</h4>  
              <button type="button" class="close" data-dismiss="modal">&times;</button>  
                 </div>  
                <div class="modal-body" id="employee_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>  
 <!-- /Employee Details -->
 <!-- PHP Ajax Update MySQL Data Through Bootstrap Modal -->
 <div id="add_data_Modal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                       <h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal</h4>  
                       <button type="button" class="close" data-dismiss="modal">&times;</button>  
                </div>  
                <div class="modal-body">  
                     <form method="post" id="insert_form">  
                          <label>Enter Employee Name</label>  
                          <input type="text" name="name" id="name" class="form-control" />  
                          <br />  
                          <label>Enter Employee Address</label>  
                          <textarea name="address" id="address" class="form-control"></textarea>  
                          <br />  
                          <label>Select Gender</label>  
                          <select name="gender" id="gender" class="form-control">  
                               <option value="Male">Male</option>  
                               <option value="Female">Female</option>  
                          </select>  
                          <br />  
                          <label>Enter Designation</label>  
                          <input type="text" name="designation" id="designation" class="form-control" />  
                          <br />  
                          <label>Enter Salary</label>  
                          <input type="text" name="salary" id="salary" class="form-control" />  
                          <br />  
                          <input type="hidden" name="employee_id" id="employee_id" />  
                          <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />  
                     </form>  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div> 
  <!-- / PHP Ajax Update MySQL Data Through Bootstrap Modal -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>     
<script>  
 $(document).ready(function() {
    $('#add').click(function() {
        $('#insert').val("Insert");
        $('#insert_form')[0].reset();
    });
    $(document).on('click', '.edit_data', function() {
        var employee_id = $(this).attr("id");
        $.ajax({
            url: "fetch.php",
            method: "POST",
            data: {
                employee_id: employee_id
            },
            dataType: "json",
            success: function(data) {
                $('#name').val(data.name);
                $('#address').val(data.address);
                $('#gender').val(data.gender);
                $('#designation').val(data.designation);
                $('#salary').val(data.salary);
                $('#employee_id').val(data.id);
                $('#insert').val("Update");
                $('#add_data_Modal').modal('show');
            }
        });
    });
    $('#insert_form').on("submit", function(event) {
        event.preventDefault();
        if ($('#name').val() == "") {
            alert("Employee Name Required");
        } else if ($('#address').val() == '') {
            alert("Employee Address Required");
        } else if ($('#designation').val() == '') {
            alert("Employee Designation Required");
        } else if ($('#salary').val() == '') {
            alert("Employee Salary Required");
        } else {
            $.ajax({
                url: "insert.php",
                method: "POST",
                data: $('#insert_form').serialize(),
                beforeSend: function() {
                    $('#insert').val("Inserting");
                },
                success: function(data) {
                    $('#insert_form')[0].reset();
                    $('#add_data_Modal').modal('hide');
                    $('#employee_table').html(data);
                }
            });
        }
    });
    $(document).on('click', '.view_data', function() {
        var employee_id = $(this).attr("id");
        if (employee_id != '') {
            $.ajax({
                url: "select.php",
                method: "POST",
                data: {
                    employee_id: employee_id
                },
                success: function(data) {
                    $('#employee_detail').html(data);
                    $('#dataModal').modal('show');
                }
            });
        }
    });
});
 </script> 
</body>  
 </html>

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

<?php

include 'conn.php'; // MySQL Connection

$query = "SELECT * FROM emp_data ORDER BY id DESC";

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

<!DOCTYPE html>

<html>

<head>

<title>Ajax Popup View Add and Update Data Using PHP & MySQL - softAOX</title>

</head>

<body>

<h3 align="center">Ajax Popup View Add and Update Data Using PHP & MySQL</h3>

<br />

<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add New Employee</button>

</div>

<br />

<h4 align="center">Employee Data Management</h4>

<tr>

<th width="70%">Employee Name</th>

<th width="20%" class="text-center">View Employee Details</th>

</tr>

<?php

while($row = mysqli_fetch_array($result))

{

<tr>

<td class="text-center"><input type="button" name="edit" value="Edit" id="<?php echo $row["id"]; ?>" class="btn btn-info edit_data" /></td>

<td class="text-center"><input type="button" name="view" value="view" id="<?php echo $row["id"]; ?>" class="btn btn-success view_data" /></td>

</tr>

<?php

}

</table>

</div>

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

</div>

</div>

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

</div>

<h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal</h4>

</div>

<label>Enter Employee Name</label>

<br />

<label>Enter Employee Address</label>

<br />

<label>Select Gender</label>

<option value="Female">Female</option>

</select>

<br />

<label>Enter Designation</label>

<br />

<label>Enter Salary</label>

<br />

</form>

</div>

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

</div>

$(document).ready(function() {

$('#add').click(function() {

$('#insert').val("Insert");

$('#insert_form')[0].reset();

});

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

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

$.ajax({

url: "fetch.php",

method: "POST",

data: {

employee_id: employee_id

dataType: "json",

success: function(data) {

$('#name').val(data.name);

$('#address').val(data.address);

$('#gender').val(data.gender);

$('#designation').val(data.designation);

$('#salary').val(data.salary);

$('#employee_id').val(data.id);

$('#insert').val("Update");

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

}

});

$('#insert_form').on("submit", function(event) {

event.preventDefault();

if ($('#name').val() == "") {

alert("Employee Name Required");

} else if ($('#address').val() == '') {

alert("Employee Address Required");

} else if ($('#designation').val() == '') {

alert("Employee Designation Required");

} else if ($('#salary').val() == '') {

alert("Employee Salary Required");

} else {

$.ajax({

url: "insert.php",

method: "POST",

data: $('#insert_form').serialize(),

beforeSend: function() {

$('#insert').val("Inserting");

success: function(data) {

$('#insert_form')[0].reset();

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

$('#employee_table').html(data);

}

});

}

});

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

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

if (employee_id != '') {

$.ajax({

url: "select.php",

method: "POST",

data: {

employee_id: employee_id

success: function(data) {

$('#employee_detail').html(data);

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

}

});

}

});

</script>

</body>

</html>

insert.php

<?php  
 include 'conn.php'; // MySQL Connection
 if(!empty($_POST))  
 {  
      $output = '';  
      $message = '';  
      $name = mysqli_real_escape_string($connect, $_POST["name"]);  
      $address = mysqli_real_escape_string($connect, $_POST["address"]);  
      $gender = mysqli_real_escape_string($connect, $_POST["gender"]);  
      $designation = mysqli_real_escape_string($connect, $_POST["designation"]);  
      $salary = mysqli_real_escape_string($connect, $_POST["salary"]);  
      if($_POST["employee_id"] != '')  
      {  
           $query = "  
           UPDATE emp_data   
           SET name='$name',   
           address='$address',   
           gender='$gender',   
           designation = '$designation',   
           salary = '$salary'   
           WHERE id='".$_POST["employee_id"]."'";  
           $message = 'Data Updated';  
      }  
      else  
      {  
           $query = "  
           INSERT INTO emp_data(name, address, gender, designation, salary)  
           VALUES('$name', '$address', '$gender', '$designation', '$salary');  
           ";  
           $message = 'Added Record Successfully';  
      }  
      if(mysqli_query($connect, $query))  
      {  
           $output .= '<label class="text-success">' . $message . '</label>';  
           $select_query = "SELECT * FROM emp_data ORDER BY id DESC";  
           $result = mysqli_query($connect, $select_query);  
           $output .= '  
                <table class="table table-bordered">  
                     <tr>  
                          <th width="70%">Employee Name</th>  
                          <th width="15%">Edit</th>  
                          <th width="15%">View</th>  
                     </tr>  
           ';  
           while($row = mysqli_fetch_array($result))  
           {  
                $output .= '  
                     <tr>  
                          <td>' . $row["name"] . '</td>  
                          <td><input type="button" name="edit" value="Edit" id="'.$row["id"] .'" class="btn btn-info btn-xs edit_data" /></td>  
                          <td><input type="button" name="view" value="view" id="' . $row["id"] . '" class="btn btn-info btn-xs view_data" /></td>  
                     </tr>  
                ';  
           }  
           $output .= '</table>';  
      }  
      echo $output;  
 }  
 ?>

<?php

include 'conn.php'; // MySQL Connection

if(!empty($_POST))

{

$output = '';

$message = '';

$name = mysqli_real_escape_string($connect, $_POST["name"]);

$address = mysqli_real_escape_string($connect, $_POST["address"]);

$gender = mysqli_real_escape_string($connect, $_POST["gender"]);

$designation = mysqli_real_escape_string($connect, $_POST["designation"]);

$salary = mysqli_real_escape_string($connect, $_POST["salary"]);

if($_POST["employee_id"] != '')

{

$query = "

UPDATE emp_data

SET name='$name',

address='$address',

gender='$gender',

designation = '$designation',

salary = '$salary'

WHERE id='".$_POST["employee_id"]."'";

$message = 'Data Updated';

}

else

{

$query = "

INSERT INTO emp_data(name, address, gender, designation, salary)

VALUES('$name', '$address', '$gender', '$designation', '$salary');

$message = 'Added Record Successfully';

}

if(mysqli_query($connect, $query))

{

$output .= '<label class="text-success">' . $message . '</label>';

$select_query = "SELECT * FROM emp_data ORDER BY id DESC";

$result = mysqli_query($connect, $select_query);

$output .= '

<tr>

<th width="70%">Employee Name</th>

</tr>

while($row = mysqli_fetch_array($result))

{

$output .= '

<tr>

</tr>

}

$output .= '</table>';

}

echo $output;

}

select.php

<?php
if (isset($_POST["employee_id"])) {
    $output = '';
    include 'conn.php'; // MySQL Connection
    $query  = "SELECT * FROM emp_data WHERE id = '" . $_POST["employee_id"] . "'";
    $result = mysqli_query($connect, $query);
    $output .= '  
      <div class="table-responsive">  
           <table class="table table-striped">';
    while ($row = mysqli_fetch_array($result)) {
        $output .= '  
                <tr>  
                     <td width="30%"><label>Name</label></td>  
                     <td width="70%">' . $row["name"] . '</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Address</label></td>  
                     <td width="70%">' . $row["address"] . '</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Gender</label></td>  
                     <td width="70%">' . $row["gender"] . '</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Designation</label></td>  
                     <td width="70%">' . $row["designation"] . '</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Salary</label></td>  
                     <td width="70%">' . $row["salary"] . ' Year</td>  
                </tr>  
           ';
    }
    $output .= '  
           </table>  
      </div>  
      ';
    echo $output;
}
?>

<?php

if (isset($_POST["employee_id"])) {

$output = '';

include 'conn.php'; // MySQL Connection

$query = "SELECT * FROM emp_data WHERE id = '" . $_POST["employee_id"] . "'";

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

$output .= '

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

while ($row = mysqli_fetch_array($result)) {

$output .= '

<tr>

</tr>

<tr>

<td width="30%"><label>Address</label></td>

<td width="70%">' . $row["address"] . '</td>

</tr>

<tr>

<td width="30%"><label>Gender</label></td>

<td width="70%">' . $row["gender"] . '</td>

</tr>

<tr>

<td width="30%"><label>Designation</label></td>

<td width="70%">' . $row["designation"] . '</td>

</tr>

<tr>

<td width="30%"><label>Salary</label></td>

<td width="70%">' . $row["salary"] . ' Year</td>

</tr>

}

$output .= '

</table>

</div>

echo $output;

}

fetch.php

<?php
include 'conn.php'; // MySQL
if (isset($_POST["employee_id"])) {
    $query  = "SELECT * FROM emp_data WHERE id = '" . $_POST["employee_id"] . "'";
    $result = mysqli_query($connect, $query);
    $row    = mysqli_fetch_array($result);
    echo json_encode($row);
}
?>

<?php

include 'conn.php'; // MySQL

if (isset($_POST["employee_id"])) {

$query = "SELECT * FROM emp_data WHERE id = '" . $_POST["employee_id"] . "'";

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

$row = mysqli_fetch_array($result);

echo json_encode($row);

}

Preview & Download

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

Ajax Popup View, Add and Update Data Using PHP & MySQL

Share:

conn.php

index.php

insert.php

select.php

fetch.php

Preview & Download

Mraj

Don't miss on latest updates