Show and Edit Dynamic Data In Modal Popup PHP

Brijpal Sharma

Date:-May 17th, 2020 , Posted On:- Web Development

This blog post, we learn how to show and edit Dynamic data in modal. We perform this task using the data attribute and Jquery.

Sometimes We need Edit data on the same page using modal, without open data on another page. So in this blog post, we learn how to that. To achieve this I use Bootstrap 4 for modal and jquery.

Step: 1 Create a HTML table

Some CDN of Bootstrap and Jquery

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>

 <table class="table">
               <thead>
                 <tr>
                   <th>#</th>
                   <th>Course Name</th>
                   <th>Duration Hours</th>
                   <th>Exam Date</th>
                   <th>Action</th>
                 </tr>
               </thead>
               <tbody>
       
                 <tr>
                   <th scope="row">1 </th>
                   <td>Computer</td>
                   <td>255 Hours</td>
                   <td>25-04-2020 </td>
                   <td><a href="javascript:;" class="addAttr btn btn-xs btn-primary" data-toggle="modal" data-target="#addModal" data-id="1" data-name="Computer" data-duration="255" data-date="27-04-2020"  > Edit</a></td>
                 </tr>
                 <tr>
                   <th scope="row">2 </th>
                   <td>Data Science</td>
                   <td>300 Hours</td>
                   <td>27-04-2020 </td>
                   <td><a href="javascript:;" class="addAttr btn btn-xs btn-primary" data-toggle="modal" data-target="#addModal" data-id="2" data-name="Data Science" data-date="27-04-2020" data-duration="300" > Edit</a></td>
                 </tr>
                 
               </tbody>
             </table>

The Result is

On the Edit Button, You can see use data attribute to get data and pass to modal using jquery.

<a href="javascript:;" class="addAttr btn btn-xs btn-primary" data-toggle="modal" data-target="#addModal" data-id="2" data-name="Data Science" data-date="27-04-2020" data-duration="300" > Edit</a>

Here we pass 4 column data to modal so we have.

data-id="2"
data-name="Computer"
data-duration="255"
data-date="27-04-2020"

In your case that will be all data will be dynamic

Step: 2 Receive the data in jquery button click

<script>
    $('.addAttr').click(function() {
    var id = $(this).data('id');      
    var name = $(this).data('name');  
    var duration = $(this).data('duration');     
    var date = $(this).data('date');     

    $('#id').val(id);  
    $('#name').val(name);  
    $('#duration').val(duration);  
    $('#date').val(date);  
    } );
 </script>

Step: 3 Set data into modal

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
       <div class="modal-content">
          <div class="modal-header">
             <h5 class="modal-title" id="exampleModalLabel">Modal Title </h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
             </button>
          </div>
          <form action="" method="POST">
            
             <div class="modal-body">

                <div class="form-group">
                   <label for="exampleInputEmail1">Course Id</label>
                   <input type="text" class="form-control" id="id" name="id"  required>
                </div>
                <div class="form-group">
                   <label for="exampleInputEmail1">Enter Course Name</label>
                   <input type="text" class="form-control" id="name" name="name"  required>
                </div>
                <div class="form-group">
                   <label for="exampleInputEmail1">Enter Course Duration <small> (In hours)</small> </label>
                   <input type="text" class="form-control" id="duration" name="duration" value="" required >
                </div>
                <div class="form-group">
                   <label for="exampleInputEmail1">Date </label>
                   <input type="text" class="form-control" id="date" name="date" value="" required >
                </div>
             </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
             </div>
          </form>
       </div>
    </div>
 </div>

Full Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

   <script
   src="https://code.jquery.com/jquery-3.5.1.slim.js"
   integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM="
   crossorigin="anonymous"></script>
      
   <title>Document</title>
</head>
<body>
   <div class="container">
      <div class="row">
         <div class="col-md-3"></div>
         <div class="col-md-6">
            <table class="table">
               <thead>
                 <tr>
                   <th>#</th>
                   <th>Course Name</th>
                   <th>Duration Hours</th>
                   <th>Exam Date</th>
                   <th>Action</th>
                 </tr>
               </thead>
               <tbody>
       
                 <tr>
                   <th scope="row">1 </th>
                   <td>Computer</td>
                   <td>255 Hours</td>
                   <td>25-04-2020 </td>
                   <td><a href="javascript:;" class="addAttr btn btn-xs btn-primary" data-toggle="modal" data-target="#addModal" data-id="1" data-name="Computer" data-duration="255" data-date="27-04-2020"  > Edit</a></td>
                 </tr>
                 <tr>
                   <th scope="row">2 </th>
                   <td>Data Science</td>
                   <td>300 Hours</td>
                   <td>27-04-2020 </td>
                   <td><a href="javascript:;" class="addAttr btn btn-xs btn-primary" data-toggle="modal" data-target="#addModal" data-id="2" data-name="Data Science" data-date="27-04-2020" data-duration="300" > Edit</a></td>
                 </tr>
                 
               </tbody>
             </table>
         </div>
         <div class="col-md-3"></div>
      </div>
   </div>




      
<script>
    $('.addAttr').click(function() {
    var id = $(this).data('id');      
    var name = $(this).data('name');  
    var duration = $(this).data('duration');     
    var date = $(this).data('date');     

    $('#id').val(id);  
    $('#name').val(name);  
    $('#duration').val(duration);  
    $('#date').val(date);  
    } );
 </script>
 <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
       <div class="modal-content">
          <div class="modal-header">
             <h5 class="modal-title" id="exampleModalLabel">Modal Title </h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
             </button>
          </div>
          <form action="" method="POST">
            
             <div class="modal-body">

                <div class="form-group">
                   <label for="exampleInputEmail1">Course Id</label>
                   <input type="text" class="form-control" id="id" name="id"  required>
                </div>
                <div class="form-group">
                   <label for="exampleInputEmail1">Enter Course Name</label>
                   <input type="text" class="form-control" id="name" name="name"  required>
                </div>
                <div class="form-group">
                   <label for="exampleInputEmail1">Enter Course Duration <small> (In hours)</small> </label>
                   <input type="text" class="form-control" id="duration" name="duration" value="" required >
                </div>
                <div class="form-group">
                   <label for="exampleInputEmail1">Date </label>
                   <input type="text" class="form-control" id="date" name="date" value="" required >
                </div>
             </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
             </div>
          </form>
       </div>
    </div>
 </div>
</body>
</html>

I hope this post Show and Edit Dynamic Data In Modal Popup PHP helps you. Thanks

About the author

Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...

2 comments

eliran

May 22nd, 2020 - 8:35AM

Great thanks. but how can i do it dynamic data when popup has shown?

Brijpal Sharma

May 22nd, 2020 - 2:20PM

You just need to dynamic your button attributes value such as " data-id="1" data-name=" Computer" " . js will automatically show on modal.

You must be logged in to post a comment.

You may also be interested in...

How to use free SSL for website from Cloudflare [1 year Free]?
How To Make Multi Auth In Laravel 7
Fix XAMPP server error xampp-control.ini Access is denied
How To Solve CORS issue in Laravel and make Laravel CORS Middleware
How To Integrate CKFinder with CKEditor
Show and Edit Dynamic Data In Modal Popup PHP
How To Use Laravel 7 Blade Component [New Feature in Laravel 7]
How To Display A Loader While Sent Request Is In Progress In Vue
Validation Handling In Laravel Vue Error Step By Step
How To Use Tinker To Store Data in Database In Laravel 6

Show and Edit Dynamic Data In Modal Popup PHP

Brijpal Sharma

Step: 1 Create a HTML table

Step: 2 Receive the data in jquery button click

Step: 3 Set data into modal

Full Code

Brijpal Sharma

eliran

Brijpal Sharma

You may also be interested in...

Top Searched Topics

Our Services

Quick links