Brijpal Sharma
php
javascript
Publish on:-May 17th, 2020 ,
Category:- Web Development
Show and Edit Dynamic Data In Modal Popup PHP
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.
.png)
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
.png)
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.
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 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">×</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">×</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
eliran
Publish on:-May 22nd, 2020
Great thanks. but how can i do it dynamic data when popup has shown?
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.