Brijpal Sharma
php
javascript
Publish on:-May 17th, 2020 ,
Category:- Web Development
Brijpal Sharma
php
javascript
Publish on:-May 17th, 2020 ,
Category:- Web Development
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.
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.
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
<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>
<!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...
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.