如何使用jQuery傳遞表值以在Bootstrap Modal中形成輸入值？

Question

編輯：我終於設法傳遞值.val（），但是，它只有在我改變輸入字段名稱和ID是相同的後才起作用。

我不明白如何使用值從表中fullfill我的引導模式窗體輸入字段 - 我想創建編輯功能。因此，當按下編輯按鈕時，它將打開帶有窗體的模態窗口，並且已經從當前項目填充滿了字段。

我以前console.log()所以值傳遞給JS。我不確定的唯一事情是如何通過項目ID。

但是，我真的沒有得到如何滿足這些值的輸入字段。我試圖$('#frm_name').text(name) - 沒有任何反應，形成以空字段中顯示， $('#frm_name').append(name) - 沒有任何反應，形成以空字段和$('#frm_name').value(name)打開 - 編輯按鈕都沒有工作，沒有開放模式。

模態CODE

<div class="modal fade" id="myModal" role="dialog" aria labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel">Edit record</h4> 
      </div> 
      <div class="modal-body"> 
       <form id="" action="" method="POST" class="form"> 
       <div class="form-group"> 
        <label for="name1">Name</label> 
        <input type="text" class="form-control" name="name1" id="frm_name" value="test_value"> 
       </div> 
       <div class="form-group"> 
        <label for="ean1">EAN</label> 
        <input type="text" class="form-control" name="ean1" id="frm_ean" value=""> 
       </div> 
       <div class="form-group"> 
        <label for="price1">Price</label> 
        <input type="text" class="form-control" name="price1" id="frm_price" value=""> 
       </div> 
       <div class="form-group"> 
        <label for="date1">Date</label> 
        <input type="text" class="form-control" name="date1" id="frm_date" value=""> 
       </div> 
        <input type="hidden" name="id1" id="frm_id" value=""> 
        <input type="submit" name="submit" class="btn btn-primary btn-custom" value="Save changes"> 
      </form> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <div id="results"></div> 
     </div> 
    </div> 
</div> 

表的代碼

<div class="table-responsive"> 
    <table class="table table-bordered table-hover"> 
     <thead> 
      <tr> 
       <td class="text-left" >ID</td> 
       <td class="text-left" >Product name</td> 
       <td class="text-left">EAN</td> 
       <td class="text-left">Special price</td> 
       <td class="text-left">Date Added</td> 
       <td class="text-right">Action</td> 
      </tr> 
     </thead> 
     <tbody> 
      {% if prices %} 
      {% for price in prices %} 
      <tr> 
       <td class="text-left td_id">{{ price.id }}</td> 
       <td class="text-left td_name">{{ price.product_name }}</td> 
       <td class="text-left td_ean">{{ price.ean_code }}</td> 
       <td class="text-left td_price">{{ price.special_price }}</td> 
       <td class="text-left td_date">{{ price.date_added }}</td> 
       <td class="text-right"> 
        <button type="button" id="item_{{ price.id }}" data-toggle="tooltip" title="Edit" class="btn btn-primary editModal" data-dismiss="modal"><i class="fa fa-pencil"></i></button> 
        <a href="index.php?route=customer/customer/deletePrice&user_token={{ token }}&customer_id={{ customer_id }}&customer_price_id={{ price.id }}" data-toggle="tooltip" title="delete" class="btn btn-danger"><i class="fa fa-trash-o"></i></a> 
       </td> 
      </tr> 
      {% endfor %} 
      {% else %} 
      <tr> 
       <td class="text-center" colspan="5">{{ text_no_results }}</td> 
      </tr> 
      {% endif %} 
     </tbody> 
    </table> 
</div> 
<div class="row"> 
    <div class="col-sm-6 text-left">{{ pagination }}</div> 
    <div class="col-sm-6 text-right">{{ results }}</div> 
</div> 

JS CODE

<script> 
    $(".editModal").click(function(){ 
    var $row = $(this).closest('tr'); 
    var $name = $row.find('.td_name').text(); 
    console.log($name); 
    $('#frm_name').text(name); 
    $('#myModal').modal('show'); 
    }); 
</script> 

Answer 1

您可以設置動態內容的模態

<button data-toggle="modal" data-target="#view-modal" data-id="<?php echo $item_id; ?>" id="getUser" class="btn btn-sm btn-info"><i class="glyphicon glyphicon-eye-open"></i> View</button> 


<div id="view-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
      <div class="modal-dialog"> 
        <div class="modal-content"> 

         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
          <h4 class="modal-title"> 
           <i class="glyphicon glyphicon-user"></i> User Profile 
          </h4> 
         </div> 
         <div class="modal-body"> 

          <div id="modal-loader" style="display: none; text-align: center;"> 
          <img src="ajax-loader.gif"> 
          </div> 

          <!-- content will be load here -->       
          <div id="dynamic-content"></div> 

         </div> 
         <div class="modal-footer"> 
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 

       </div> 
       </div> 
     </div> 

和使用jQuery阿賈克斯根據ITEM_ID

$(document).ready(function(){ 

    $(document).on('click', '#getUser', function(e){ 

     e.preventDefault(); 

     var item_id= $(this).data('id'); // it will get id of clicked row 

     $('#dynamic-content').html(''); // leave it blank before ajax call 
     $('#modal-loader').show();  // load ajax loader 

     $.ajax({ 
      url: 'getitem.php', 
      type: 'POST', 
      data: 'id='+item_id, 
      dataType: 'html' 
     }) 
     .done(function(data){ 
      console.log(data); 
      $('#dynamic-content').html('');  
      $('#dynamic-content').html(data); // load response 
      $('#modal-loader').hide();  // hide ajax loader 
     }) 
     .fail(function(){ 
      $('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...'); 
      $('#modal-loader').hide(); 
     }); 

    }); 

});