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

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

这是代码：

PHP的：

<!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>

来源

2017-07-07 MYxx

首先，看看http://bobby-tables.com因为你的应用程序运行在SQL注入的风险很高。使用准备好的语句进行查询，绝不会将用户输入直接放入查询中！对于你的问题：首先定义循环外部的变量，比如'$ controlnumber =“”;' - 如果你想了解更多关于PHP变量范围的信息，请查找'PHP while loop scope'。 – Twinfriends

@MYxx因为我理解你的问题，当点击提交按钮模式时必须弹出一行表格数据，并且必须在表格中显示特定值。但是或者你需要我们'AJAX'。 –

@MYxx这里是'php''mysql''ajax''jquery'的类似例子。点击这个链接，并告诉我是否这是你正在寻找或需要我需要添加更多.. [链接1]（https://ibb.co/n4N0fF）[链接2]（https://ibb.co/kXYj7v） –

@MYxx这里是你想要的东西。这里我用OOPS PHPMYSQLi PrepareJQuery 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); 
    } 
?>

来源

2017-07-08 14:56:07

好悲伤。不需要尖叫。我正在编辑。 –

@cale_b它可以删除它 –

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

回答

相关问题