Show and Edit Dynamic Data In Modal Popup PHP

Generic placeholder image
Brijpal Sharma
php javascript  

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.

  1. data-id="2"

  2. data-name="Computer"

  3. data-duration="255"

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

user profile
Brijpal Sharma

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
Generic placeholder image
eliran
May 22nd, 2020 - 8:35AM

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

Generic placeholder image
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.