Bootstrap modal popup using button

Question

1.00/5 (1 vote)

See more:

Hi, I have HTML form with a button, when I click button the modal form will popup but when I put php code inside the href it will not popup. Please help me. Thank you in advance.

What I have tried:

This code show the modal popup:

<td><a href="#myModal" data-toggle="modal"><button class="btn btn-primary">Edit Record</button></a></td>

This one is not show the modal popup:

<td><a href="#myModal <?php echo '?id='.$id; ?>" data-toggle="modal"><button class="btn btn-primary">Edit Record</button></a></td>

Posted 24-Sep-18 12:34pm

Kenjiro Aikawa

Updated 25-Sep-18 14:27pm

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bryian Tan · Answer 1 · 2018-09-24T15:04:00

Solution 1

Based on what you have posted, I think you might need to update the code to use data attribute to pass the id into the modal. Then read the value using JavaScript. Something like below.

PHP

<td><a href="#myModal" data-id="<?php echo $id; ?>" data-toggle="modal"><button class="btn btn-primary">Edit Record</button></a></td>

here is an example: bootstrap modal popup with data - JSFiddle[^]

Reference:
JavaScript · Bootstrap[^]

Posted 24-Sep-18 15:04pm

Bryian Tan

Comments

Kenjiro Aikawa 25-Sep-18 20:19pm

Hi Bryan, Thank you for the solution I have fix my problem about passing data from modal and showing the modal by separating the it to my user account page but the problem is when I include that modal page to my query my table was ruin. i don't know what's the problem. I will post my code.

Kenjiro Aikawa · Answer 2 · 2018-09-25T14:28:00

<div class="container">
            <table class="table table-bordered" style="position: fixed; margin-left:12px; margin-top:210px; margin-bottom:10px; width:87%">
                <thead>
                    <tr>
                        <th style="padding-bottom:15px;">No.</th>
                        <th style="padding-bottom:15px;">ID Number</th>
                        <th style="padding-bottom:15px;">Name</th>
                        <th style="padding-bottom:15px;">Department</th>
                        <th style="padding-bottom:15px;">Position</th>
						<th style="padding-bottom:15px;">Role</th>
						<th style="padding-bottom:15px;">Status</th>
                        <th style="padding-bottom:15px;">Option</th>
                    </tr>
                </thead>
                <tbody class="table-users">

					 <?php
					  $sql = "SELECT id, userid, name, department, position, status, role FROM tbl_user WHERE role<>'SUPER ADMIN'";
					  foreach ($db->query($sql) as $row) {	            			
	            	?>
                	<tr>
						<td><?php echo $row['id']; ?></td>
						<td><?php echo $row['userid']; ?></td>
						<td><?php echo $row['name']; ?></td>
						<td><?php echo $row['department']; ?></td>
						<td><?php echo $row['position']; ?></td>
						<td><?php echo $row['role']; ?></td>
						<td><?php echo $row['status']; ?></td>
      <td>
      <a href="#edit_<?php echo $row['id']; >" class="btn btn-success btn-sm" 
      data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit</a>
      </td>
      <?php include('edit_delete_modal.php'); ?>
                         
					</tr>
					<?php } ?>
            	</tbody>
            </table>
		</div>

Bootstrap modal popup using button

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Bootstrap modal popup using button

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us