jqueryでモーダルフォームにデータを入力する

Question

データベースからデータテーブル（jqueryプラグイン）に描画された注文テーブルがあります。 私は最後のtdまたはtrごとに支払いを追加しています。質問は、支払いを追加するために追加支払いボタンがクリックされた行の注文IDを取得するにはどうすればいいですか？

第2に、追加料金をクリックすると、モーダルフォームがフィールドまたは注文番号とともにポップアップ表示されます。そのフィールドにtdで見つかった注文IDを入力して編集不可能にするか非表示にするが、モーダルフォームが送信されるとサーバーに送信される。

テーブルとモーダルフォームがよく表示されます。

これは表です。

<div id="buyorders" class="tab-pane fade " > 
    <h3> BUY ORDERS</h3> 
     <div class="table-responsive col-sm-10">   
      <table id="buyorderstable" class = "table table-responsive table-striped display" cellspacing="0" width="100%"> 
       <thead> 
        <tr> 
        <th>ORDER#</th> 
        <th>DATE</th> 
        <th>E-CURRENCY</th> 
        <th>USD</th> 
        <th>GHC</th> 
        <th>STATUS</th> 
        <th>ACTION</th> 
        </tr> 
       </thead> 

       <tbody> 

       <?php 

       $user_id = "SELECT id FROM user WHERE email ='".$_SESSION["email"]."'"; 

       $query_user_ref = mysqli_query($mysqli,$user_id)or die('Error: ' . mysqli_error($mysqli)); 
       $fetch_user_ref = mysqli_fetch_array($query_user_ref); 
       $user_ref = $fetch_user_ref['id']; 
       $sql = "SELECT * FROM buy_orders WHERE user_ref = '".$user_ref."' "; 
       $sql_query = mysqli_query($mysqli,$sql)or die('Error: ' . mysqli_error($mysqli));; 

       while ($row = mysqli_fetch_array($sql_query)){ 
        echo ' 
        <tr> 
        <td data-id=".$row["buy_order_no"]." class="orderid" >'.$row['buy_order_no'].'</td> 
        <td>'.$row['date'].'</td> 
        <td>'.$row['ecurrency'].'</td> 
        <td>'.$row['usd'].'</td> 
        <td>'.$row['ghc'].'</td> 
        <td >'.$row['status'].'</td> 
        <td id="addpaylink"> <a href="#"><i class="fa fa-eye" aria-hidden="true">View </i></a> <a href="#" data-toggle="modal" data-target="#myModal"" >ADD PAYMENT</a> </td> 
        </tr>' ; 
       } 

       mysqli_close($mysqli); 
       ?> 

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

これは、これが）jqueryの

$(document).ready(function() { 
$('#myMoal').modal({ 
    keyboard: true, 
    backdrop: "static", 
    show:false, 

}).on('show', function(){ 
     var getIdFromRow = $(event.target).closest('tr').find(".orderid").data('id'); 
    //make your ajax call populate items or what even you need 
    $(this).find('#modaladdpay').html($(getIdFromRow) // 
}); 

}であるモーダルフォーム

<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">Add Payment Details</h4> 
     <hr/><br> 

    <div id="modaladdpay" class="modal-body"> 
     <form method="post" action="user.php"> 
     <div class="form-group"> 
       <label for="ORDER#">ORDER#:</label> 
       <input type="number" name="orderno" class="form-control" id="buyghc" placeholder="Please Specify ORDER# " required> 
     </div> 

     <div class="form-group"> 
       <label for="amount">Amount in GHC:</label> 
       <input type="number" step="any" name="addpayghc" class="form-control" id="buyghc" placeholder="Enter Amount Sent" required> 
     </div> 

     <div class="form-group"> 
      <label for="payment method">Select Payment Method:</label> 
      <select class="form-control" name="addpayselect" id="addpayment" required> 
       <option> </option> 
       <option value="mobmoney">Mobile Money</option> 
      </select> 


      <div class="form-group " id=""> 
       <label for="select network">Select Network:</label> 
       <select name="addpaynettype" class="form-control" required> 
        <option> </option> 
        <option value="MTN">MTN</option> 
        <option value="TIGO">TIGO</option> 
        <option value="AIRTEL">AIRTEL</option> 
        <option value="VODAFONE">VODAFONE</option> 
       </select> 
      </div> 
      <div class="form-group " id=""> 
       <label for="Transaction ID">Transaction ID:</label> 
       <input type="text" name="transid" class="form-control" placeholder="Enter Transaction ID (or Reference Number for Tigo Cash) " required> 
      </div> 

      <button type="submit" name="addpaydetails" id="addpaydetails" class="btn btn-primary btn-lg btn-block btn-success " >ADD PAYMENT</button> 
     </div> 
     </form> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 

</div> 

あります。

Answer 1

それが動作するために次の変更を追加します。

1. 移動データ-idはデータIDを読み、

をモーダルに割り当てる

モーダル変更Javascriptコードに関連付けられているハイパーリンク

$('#myModal').on('show.bs.modal', function(e) { 
var getIdFromRow = $(e.relatedTarget).data('id'); 
$("#buyghc").val(getIdFromRow); 
}); 

3. HTMLに小さな変更が追加されました。

4. チェックこのjsfiddle link