How to Pass a PHP Value to a Modal using jQuery

This is a PHP tutorial on how to pass a value to a bootstrap modal using jQuery. This is most applicable if you want to use jQuery when you edit your MySQL Table using Bootstrap Modal.

Creating our Database

The first step is to create our database.

  1. Open phpMyAdmin.
  2. Click databases, create a database and name it as "sample".
  3. After creating a database, click the SQL and paste the below code. See the image below for detailed instructions.
  1. CREATE TABLE `user` (
  2. `userid` int(11) NOT NULL AUTO_INCREMENT,
  3. `firstname` varchar(30) NOT NULL,
  4. `lastname` varchar(30) NOT NULL,
  5. `address` varchar(100) NOT NULL,
  6. PRIMARY KEY(`userid`)
pass

Inserting Data into our Database

The next step is to insert sample data into our database.

  1. Click the "sample" database that we have created.
  2. Click SQL and paste the code below.
  1. INSERT INTO `user` (`userid`, `firstname`, `lastname`, `address`) VALUES
  2. (1, 'neovic', 'devierte', 'silay city'),
  3. (2, 'dee', 'tolentino', 'bacolod city');

Creating our Table

Next, we create our sample table. We name this as index.php.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9.  
  10. <title>PHP Passing Value to Modal using jQuery</title>
  11.  
  12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  13. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  14. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  15.  
  16. </head>
  17. <body>
  18. <div class="container">
  19. <div style="height:50px;"></div>
  20. <div class="well">
  21. <center><h2>Passing Values to Modal using jQuery</h2></center>
  22. <div style="height:10px;"></div>
  23. <table width="100%" class="table table-striped table-bordered table-hover">
  24. <thead>
  25. <th>Firstname</th>
  26. <th>Lastname</th>
  27. <th>Address</th>
  28. <th>Action</th>
  29. </thead>
  30. <tbody>
  31. <?php
  32. $conn = mysqli_connect("localhost","root","","sample");
  33. $query=mysqli_query($conn,"select * from `user`");
  34. while($row=mysqli_fetch_array($query)){
  35. ?>
  36. <tr>
  37. <td><span id="firstname<?php echo $row['userid']; ?>"><?php echo $row['firstname']; ?></span></td>
  38. <td><span id="lastname<?php echo $row['userid']; ?>"><?php echo $row['lastname']; ?></span></td>
  39. <td><span id="address<?php echo $row['userid']; ?>"><?php echo $row['address']; ?></span></td>
  40. <td><button type="button" class="btn btn-success edit" value="<?php echo $row['userid']; ?>"><span class="glyphicon glyphicon-edit"></span> Edit</button></td>
  41. </tr>
  42. <?php
  43. }
  44. ?>
  45. </tbody>
  46. </table>
  47. </div>
  48.  
  49. <?php include('modal.php'); ?>
  50. <script src="custom.js"></script>
  51. </body>
  52. </html>

Creating our Modal

Next is to create our modal. We name this as modal.php.
  1. <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  2. <div class="modal-dialog">
  3. <div class="modal-content">
  4. <div class="modal-header">
  5. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  6. <center><h4 class="modal-title" id="myModalLabel">Edit User</h4></center>
  7. </div>
  8. <div class="modal-body">
  9. <div class="container-fluid">
  10. <div class="form-group input-group">
  11. <span class="input-group-addon" style="width:150px;">Firstname:</span>
  12. <input type="text" style="width:350px;" class="form-control" id="efirstname">
  13. </div>
  14. <div class="form-group input-group">
  15. <span class="input-group-addon" style="width:150px;">Lastname:</span>
  16. <input type="text" style="width:350px;" class="form-control" id="elastname">
  17. </div>
  18. <div class="form-group input-group">
  19. <span class="input-group-addon" style="width:150px;">Address:</span>
  20. <input type="text" style="width:350px;" class="form-control" id="eaddress">
  21. </div>
  22. </div>
  23. </div>
  24. <div class="modal-footer">
  25. <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
  26. <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> </i> Update</button>
  27. </div>
  28. </div>
  29. </div>
  30. </div>

Creating our Script

The last step is to create our script to pass a value to our modal. We name this as custom.js.

  1. $(document).ready(function(){
  2. $(document).on('click', '.edit', function(){
  3. var id=$(this).val();
  4. var first=$('#firstname'+id).text();
  5. var last=$('#lastname'+id).text();
  6. var address=$('#address'+id).text();
  7.  
  8. $('#edit').modal('show');
  9. $('#efirstname').val(first);
  10. $('#elastname').val(last);
  11. $('#eaddress').val(address);
  12. });
  13. });

That ends our tutorial. Note that I have only used CDN's in this tutorial to include the Bootstrap and jQuery Libraries which means you need an internet connection to test the source code in this tutorial. Download the the Bootstrap library here and jQuery here to run the source code even without any internet connection.

DEMO

I hope this will help you and you have learned something useful with this tutorial. Explore more on this website for more tutorials and free source codes.

Happy Coding :)

Comments

Submitted byKaramucho Karamucho (not verified)on Wed, 09/20/2017 - 20:17

Hi, Thanks for the code, but i have problem with writing code for updating records in database, your solution only shows values, but there is imposible to update values, can You get me any advise? Best regards, karamucho

Hello, You may refer to this article of mine. It includes Create, Read, Update and Delete using Ajax/jQuery. You can find the edit code there. Comment back if you're having trouble with the code. https://www.sourcecodester.com/php/11594/crud-operation-using-phpmysqli-and-ajaxjquery.html
Submitted byAnonymouse User (not verified)on Fri, 10/20/2017 - 22:50

In reply to by nurhodelta_17

Thanks for this source code. I badly needed it right now in our fucking thesis.
Submitted byAshok medidi (not verified)on Mon, 09/19/2022 - 16:43

Thank you

Add new comment