Populate modal form with jquery

Question

I am having orders table drawn from database into datatables(jquery plugin). I am having add payment at every last td or every tr. The question is, how do i get the order id of the row in which the addpayment button was clicked to add payment.

Secondly, when the addpayment is clicked, it pops up a modal form with a field or order#. I want populate that field with the order id found in the td and make it not editable or hide it but will be posted to server when the modal form is submitted.

the table and the modal form display well.

this is the table.

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

this is the modal form

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

this is the 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) //
});

});

Answer 1

Add following changes to make it working:

1. Move data-id to hyperlink associated with modal

2. Change Javascript code to read data-id and assign to modal

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

3. Small changes added to your HTML.

4. Check this jsfiddle link