Question

我试图通过可点击的行将表格中的数据传递给模态文本框。数据已经显示在表格中。单击行时，它将显示模式，但文本框为空。表中的数据来自数据库。

这是代码：

腓：

  <!DOCTYPE html>
  <html>
<head>
    <title></title>

    <meta name = "viewport" content = "width= device-width, initial-scale=1">
    <link rel = "stylesheet" href = "bs/css/bootstrap.css">

    <script src = "bs/js/jquery.min.js"></script>
    <script src = "bs/js/bootstrap.min.js"></script>

    <meta charset="utf-8">

</head>  
<body>        
    <div class="container">
        <div class="header">
            <?php include("header.php"); ?>
        </div>
        <div class = "navigation">
            <?php include("navigator.php"); ?>
        </div>
    </div>

    <center>          
    <style>
        table tr:not(:first-child){
            cursor: pointer;
        }
        table tr:not(:first-child)hover{
            background-color:azure;
            color:black;

        }
    </style> 

    <?php
        include("dbConfig.php");

        $result = mysqli_query ($con, "SELECT * FROM information");
        echo "<table id=table border = 1 width = 50%>
            <tr>
            <th align = center> Control # </th>
            <th> Last Name </th>
            <th> First Name </th>
            <th> Contact Number </th>
            </tr>"; 
        while($row=mysqli_fetch_array($result)){
            echo "<form action = method =post>";
            echo "<tr data-toggle=modal data-target=#fmodal name = pass type = submit>";
            echo "<td id='cn'>".$row['Control_Number']. "</td>";
            echo "<td>".$row['Last_Name']. "</td>";
            echo "<td>".$row['First_Name']. "</td>";
            echo "<td>".$row['Contact_Number']. "</td>";
            echo "</tr>";
            echo "</form>";
        }
        echo "</table>";

        if(isset($_POST['submit'])){
            $res = mysqli_query($con, "SELECT * FROM information WHERE Control_Number=$_POST[cn]");
            while($rowval = mysqli_fetch_array($res)){
                $controlnumber= $rowval['Control_Number'];
                $lastname= $rowval['Last_Name'];
                $firstname= $rowval['First_Name'];
                $contactnumber= $rowval['Contact_Number'];
            }
        }
    ?>

    <div class = "modal fade" id = "fmodal" role = "dialog">
        <div class = "modal-dialog" role = "document">
            <div class = "modal-content">
                <div class = "modal-header">
                    <button type = "button" class = "close" data-dismiss = "modal">&times;</button>
                    <h4>FORM</h4>
                </div>
                <div class = "modal-body text-center">
                    <label>Control Number:</label>
                    <input class = "input-lg" type = "text" id = "Control_Number" value = '<?php echo $controlnumber; ?>'><br>
                    <label>Last Name:</label>
                    <input class = "input-lg" type = "text" id = "Last_Name" value = '<?php echo $lastname; ?>'><br>
                    <label>First Name:</label>
                    <input class = "input-lg" type = "text" id = "First_Name" value = '<?php echo $firstname; ?>'><br>
                    <label>Contact Number:</label>
                    <input class = "input-lg" type = "text" id = "Contact_Number" value = '<?php echo $contactnumber; ?>'><br>
                </div>                    
            </div>
        </div>
    </div>
    </center>
</body>

Answer 1

@MYxx这是你想要的。在这里，我使用了OOPS PHP MYSQLi Prepare JQuery Ajax和JSON来发送和接收数据并以模态显示。

为什么MYSQLi PREPARED STATEMENTS因为它会阻止SQL INJECTION获取更多信息，请点击此链接sql injection

如果您不熟悉PHP和MySQL，请不要担心，您很快就会对此进行调整。如果您在理解这个答案时遇到问题，我将很乐意为您提供帮助。

的index.php

    <?php
    include('Table_info.php');

    $tbl_data = new Table_info();
?>
<!DOCTYPE html>
<html>
<head>
    <title>Welcome</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row">
    <table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th> First Name </th>
                <th> Last Name </th>
                <th> Contact Number </th>
                <th> Control Number </th>
                <th> Action</th>
            </tr>
        </thead>
        <tbody>
            <?php
                $tbl_data->show_table();

            ?>
        </tbody>
    </table>
  </div>
</div>

<!-- ADDED THE MUSIC MODAL-->
<div class="container">
  <div class="modal fade" id="fmodal" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">User data</h4>
            </div>
            <div class="modal-body" id="userdata_div">
                <form action="" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <input type="hidden" name="id" id="id" value="">
                        <p>Firstname</p>
                        <input type="text" name="fname" id="fname">
                    </div>

                    <div class="form-group">
                        <p>Lastname</p>
                        <input type="text" name="lname" id="lname">
                    </div>

                    <div class="form-group">
                        <p>Contact_Number</p>
                        <input type="text" name="Contact_Number" id="Contact_Number">
                    </div>

                    <div class="form-group">
                        <p>Lastname</p>
                        <input type="text" name="Control_Number" id="Control_Number">
                    </div>

                    <div class="form-group text-center" style="margin:0;">
                        <input type="submit" name="submit_btn" class="btn btn-default" style="border:1px solid #451;">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>      
    </div>
  </div>
</div>


<script>
$(document).ready(function(){
    getdata();
});

function getdata(){
    $('.open_model_btn').click(function(){
        $('#fmodal').modal();
        var id = $(this).attr('id');

        //alert('works');

        $.ajax({
            type:'POST',
            url:'Table_info.php',
            data:{slno_id:id},
            success:function(data){
                var res = JSON.parse(data);

                for(var i in res){
                    $('#id').val(res[i].id);
                    $('#fname').val(res[i].First_Name);
                    $('#lname').val(res[i].Last_Name);
                    $('#Contact_Number').val(res[i].Contact_Number);
                    $('#Control_Number').val(res[i].Control_Number);
                }
            }
        });

        $('#id, #fname, #lname, #Contact_Number, #Control_Number').val('');
    });
}
</script>
</body> 
</html>

PHP类文件名：Table_info.php

    <?php
    class Table_info{
        private $link;

        function __construct(){
            $this->link = new mysqli('localhost','root','','example');

            if($this->link->connect_error){
                die ('connection failed'.$this->link->connect_error);
            }
        }

        function show_table(){
            $sql = $this->link->stmt_init();
            $i=1;
            if($sql->prepare("SELECT id,First_Name,Last_Name,Contact_Number,Control_Number FROM information")){
                $sql->bind_result($id,$First_Name,$Last_Name,$Contact_Number,$Control_Number);

                $sql->execute();

                $sql->store_result();

                if($sql->num_rows > 0){
                    while($sql->fetch()){
            ?>
                        <tr>
                            <td><?php echo $i;?></td>   
                            <td><?php echo $First_Name;?></td>  
                            <td><?php echo $Last_Name;?></td>   
                            <td><?php echo $Contact_Number;?></td>  
                            <td><?php echo $Control_Number;?></td>  
                            <td><button class="btn btn-success open_model_btn" id="<?php echo $id;?>">Show</button></td>    
                        </tr>
            <?php
                        $i++;
                    }
                }

            }
            else
            {
                echo 'Error'.$this->link->error;
            }
        }

        function get_data_modal($slnoid){
            $sql = $this->link->stmt_init();
            $i=1;
            if($sql->prepare("SELECT id,First_Name,Last_Name,Contact_Number,Control_Number FROM information WHERE id=?")){
            $sql->bind_param('i',$slnoid);
                $sql->bind_result($id,$First_Name,$Last_Name,$Contact_Number,$Control_Number);

                $sql->execute();

                $sql->store_result();

                if($sql->num_rows > 0){
                    while($sql->fetch()){
                        $arr[] = array(
                            'id'=>$id,
                            'First_Name'=>$First_Name,
                            'Last_Name'=>$Last_Name,
                            'Contact_Number'=>$Contact_Number,
                            'Control_Number'=>$Control_Number,
                            'report'=>'Success'
                        );
                    }

                    echo json_encode($arr);
                }
                else
                {
                    $arr = array(
                            'statuss'=>false,
                            'report'=>'No data available'
                        );

                    echo json_encode($arr);
                }   
            }
            else
            {
                $err = 'Error'.$this->link->error;

                $arr = array(
                        'statuss'=>false,
                        'report'=>$err
                    );

                echo json_encode($arr);
            }
        }
    }

    $tbl_data = new Table_info();

    if(isset($_POST['slno_id'])){
        $slnoid = $_POST['slno_id'];

        $tbl_data->get_data_modal($slnoid);
    }
?>

将表中的数据从数据库传递到模态

1 个答案: