用jQuery填充模式形式

Question

我正在将订单表从数据库绘制到datatables（jquery插件）中。 我要在每笔最后一笔交易或每笔交易中增加付款。 问题是，如何获取单击添加付款按钮以添加付款的行的订单ID。

其次，当点击addpayment时，它会弹出一个带有字段或订单号的模态表单。 我想用在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>

这是模态形式

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

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

添加以下更改以使其正常工作：

1. 将data-id移至与模式关联的超链接

2. 更改Javascript代码以读取数据ID并分配给模式

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

3. 微小的变化添加到您的HTML。

4. 检查此jsfiddle链接