Show and Edit Dynamic Data In Modal Popup PHP

Brijpal Sharma
php javascript   Publish on:-May 17th, 2020 , Category:- 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="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin=anonymous>

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

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

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

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

 

 <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:;" 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:;" 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:;" 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 id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div role="document">
    <div >
     <div >
       <h5 id="exampleModalLabel">Modal Title </h5>
       <button type=button data-dismiss="modal" aria-label="Close">
       <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <form action="" method="POST">
      
       <div >

        <div >
          <label for="exampleInputEmail1">Course Id</label>
          <input type=text id="id" name=id required>
        </div>
        <div >
          <label for="exampleInputEmail1">Enter Course Name</label>
          <input type=text id="name" name=name required>
        </div>
        <div >
          <label for="exampleInputEmail1">Enter Course Duration <small> (In hours)</small> </label>
          <input type=text id="duration" name=duration value="" required >
        </div>
        <div >
          <label for="exampleInputEmail1">Date </label>
          <input type=text id="date" name=date value="" required >
        </div>
       </div>
       <div >
        <button type=button data-dismiss="modal">Close</button>
        <button type=submit >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="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin=anonymous>

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

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

  <script
  src=//code.jquery.com/jquery-3.5.1.slim.js
  integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM="
  crossorigin=anonymous></script>
   
  <title>Document</title>
</head>
<body>
  <div >
   <div >
     <div ></div>
     <div >
      <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:;" 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:;" 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 ></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 id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div role="document">
    <div >
     <div >
       <h5 id="exampleModalLabel">Modal Title </h5>
       <button type=button data-dismiss="modal" aria-label="Close">
       <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <form action="" method="POST">
      
       <div >

        <div >
          <label for="exampleInputEmail1">Course Id</label>
          <input type=text id="id" name=id required>
        </div>
        <div >
          <label for="exampleInputEmail1">Enter Course Name</label>
          <input type=text id="name" name=name required>
        </div>
        <div >
          <label for="exampleInputEmail1">Enter Course Duration <small> (In hours)</small> </label>
          <input type=text id="duration" name=duration value="" required >
        </div>
        <div >
          <label for="exampleInputEmail1">Date </label>
          <input type=text id="date" name=date value="" required >
        </div>
       </div>
       <div >
        <button type=button data-dismiss="modal">Close</button>
        <button type=submit >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

 


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
Publish on:-May 22nd, 2020
Great thanks. but how can i do it dynamic data when popup has shown?

Generic placeholder image

Brijpal Sharma
Publish on:-May 22nd, 2020
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.