將表中的數據從數據庫傳遞到模態

我試圖通過可點擊的行將表中的數據傳遞給模態文本框。數據已經顯示在表格中。當單擊行時，它顯示模式，但文本框是空白的。表中的數據來自數據庫。將表中的數據從數據庫傳遞到模態

這是代碼：

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它可以刪除它 –

將表中的數據從數據庫傳遞到模態

回答

相關問題