テーブルのデータをデータベースからモーダルに渡す

テーブルのデータをクリック可能な行を介してモーダルのテキストボックスに渡そうとしています。データはすでにテーブルに表示されています。行をクリックすると、モーダルが表示されますが、テキストボックスは空白です。テーブルのデータはデータベースからのものでした。テーブルのデータをデータベースからモーダルに渡す

これはコードです：

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'と似た例です。このリンクをクリックして、あなたが探しているものか、必要なものかを教えてください。私はもっともっと追加する必要があります.. [link 1]（https://ibb.co/n4N0fF）[link 2]（https://ibb.co/kXYj7v） –

@MYxxは、あなたが望んでいたものです。ここで私はOOPS PHPMYSQLi PrepareJQuery AjaxとJSONを使ってデータを送受信し、モーダルで表示しています。

なぜMYSQLi PREPARED STATEMENTSそれはあなたがPHPとMySQLを初めて使用する場合は、このリンクをsql injection

をクリックしてください詳細はSQL INJECTIONを防ぐために、あなたはすぐにこのように調整しまいます、心配しないでください。この回答を理解できない場合は、をお手伝いいたします。

の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そのok illを削除します –

テーブルのデータをデータベースからモーダルに渡す

答えて

関連する問題