如何使用動態表單內容創建和顯示模態？

Question

對不起，我對JQuery並不熟悉，但我會全力以解。
作爲下面的代碼，我將創建並顯示一個引導模式，其中包含一個動態輸入值「id」，指定要刪除的項目。

<div class="modal fade" id="myDeleteModal" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h2 class="modal-title">Input the password to delete</h2> 
      </div> 
     <div class="modal-body"> 
      <form id="modal-form" method="post" action="password_wrong.html" enctype="multipart/form-data" > 
       <div class="form-group"> 
        <input type="password" class="form-control" id="res-passwd" name="password" required="required" placeholder="Password:"/> 
        <input type="hidden" name="delete_id" value="{dynamic}"/> 
       </div> 
      </form> 
     </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
     <button type="submit" class="btn btn-default" form="modal-form" >Delete</button> 
    </div> 
</div> 

唯一活力的地方是

<input type="hidden" name="delete_id" value="{dynamic}"/> 

我怎麼能這樣做？

Answer 1

使用jQuery選擇輸入和設置的值

$("input[name=delete_id]").val(deleteVal); 

$('.openmodal').click(function() { 
 
    var deleteVal = $(this).attr('data-val'); 
 
    console.log(deleteVal) 
 
    
 
    $('#myDeleteModal').modal({ 
 
     show: true 
 
    }); 
 
    
 
    $("input[name=delete_id]").val(deleteVal); 
 

 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<a href="#" class="btn btn-default openmodal" data-val="1">Delete 1</a> 
 
<a href="#" class="btn btn-default openmodal" data-val="2">Delete 2</a> 
 

 

 
<div class="modal fade" id="myDeleteModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <h2 class="modal-title">Input the password to delete</h2> 
 
      </div> 
 
     <div class="modal-body"> 
 
      <form id="modal-form" method="post" action="password_wrong.html" enctype="multipart/form-data" > 
 
       <div class="form-group"> 
 
        <input type="password" class="form-control" id="res-passwd" name="password" required="required" placeholder="Password:"/> 
 
        <input type="hidden" name="delete_id" value="{dynamic}"/> 
 
       </div> 
 
      </form> 
 
     </div> 
 
    <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
     <button type="submit" class="btn btn-default" form="modal-form" >Delete</button> 
 
    </div> 
 
</div> 
 
</div>

，或者使用自舉show.bs.modal事件

$('#myDeleteModal').on('show.bs.modal', function (event) { 
 
    var button = $(event.relatedTarget) 
 
    var deleteVal = button.attr('data-val'); 
 
    console.log(deleteVal) 
 
    $(this).find('input[name=delete_id]').val(deleteVal) 
 
}) 
 
$('.openmodal').click(function() { 
 
     $('#myDeleteModal').modal('show',$(this)); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
    <a href="#" class="btn btn-default openmodal" data-val="1">Delete 1</a> 
 
    <a href="#" class="btn btn-default openmodal" data-val="2">Delete 2</a> 
 

 

 
    <div class="modal fade" id="myDeleteModal" role="dialog"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <h2 class="modal-title">Input the password to delete</h2> 
 
       </div> 
 
      <div class="modal-body"> 
 
       <form id="modal-form" method="post" action="password_wrong.html" enctype="multipart/form-data" > 
 
        <div class="form-group"> 
 
         <input type="password" class="form-control" id="res-passwd" name="password" required="required" placeholder="Password:"/> 
 
         <input type="hidden" name="delete_id" value="{dynamic}"/> 
 
        </div> 
 
       </form> 
 
      </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
      <button type="submit" class="btn btn-default" form="modal-form" >Delete</button> 
 
     </div> 
 
    </div> 
 
    </div>