'How to open modal from a link with id?

I have a link that when the user clicks it, a modal will show containing the following:

<?php

    include ('dbcontroller.php');
    if(isset($_GET['view_id']))
    {
        $id=$_GET['view_id'];
        $sql = mysqli_query($conn, "SELECT * from press where id='$id'");
        $row = mysqli_fetch_array($sql);
    ?>  

    <input type="hidden" value="<?php echo  $row['id']; ?>" />
    <?php echo $row['reason']; ?>

        <a href="index.php" class="btn btn-primary">GO BACK</a>
    <?php 
    }
    $conn->close();
?>

The code above is what I did so that when the user click the link, it will redirect him to that page. But i want it to be in modal dialog instead since it's not much content.

This is the link that the user clicks. How will I open this link into a modal dialog?

<a href="viewReason.php?view_id=<?php echo $row['id'];?>">Click to view </a>

I've seen some on this site and elsewhere but all they have is a link without an ID to view modal dialog. I didn't find an issue same with mine so I decided to ask for help.

phpmodal-dialoghrefbootstrap-modal


Solution 1:[1]

hey you can use following code to get row value 

 <!DOCTYPE html>
        <html lang="en">
        <head>

          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        </head>
        <body>

        <div class="container">

          <!-- Trigger the modal with a button -->

        <br><br><br><br>
        <table id="prab" border="1">
          <tr>
            <td>Jill</td>
            <td>Smith</td> 
            <td>50</td>
            <td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="Jackson"><span class="glyphicon glyphicon-envelope"></span>Invite</button></td>
          </tr>
          <tr>
            <td>Eve</td>
            <td>Jackson</td> 
            <td>50</td>
                <td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="smith" ><span class="glyphicon glyphicon-envelope"></span>Invite</button></td>
          </tr>
        </table>
          <!-- Modal -->
          <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                  <p>clicked value </p>

                  <input type="text" id="valueof" >


                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>


            </div>
          </div>

        </div>
         <script type="text/javascript">
            $('#prab').click(function(e){
                // alert($(e.target).val());
            document.getElementById("valueof").value = $(e.target).val(); 

        })
            </script>


        </body>
        </html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ram singh

Related Questions