Question

我想将数据从编辑模式转移到删除模式。由于我不是JavaScript程序员，因此我尝试了所有与示例不同的方法，但似乎没有任何东西可以将editmodal中的数据传输到delete modal。老实说，我什至不知道这是否可能。

我做了一个小提琴，在编辑模态中打开删除模态以显示目的，所以仍然存在一个大问题，如何在这两个模态之间传输数据？

https://jsfiddle.net/atongraaff/dxhgo06t/56/

我编辑了我以前的请求，取而代之的是这个小提琴。

小提琴上的html：

<table>
<tr ID1="1" sometext1="example1" data-toggle="modal" data-target="#modaledit">
  <td>1</td>
  <td>example1</td>
</tr>
<tr ID1="2" sometext1="example2" data-toggle="modal" data-target="#modaledit">
  <td>2</td>
  <td>example2</td>
</tr>
<tr ID1="3" sometext1="example3" data-toggle="modal" data-target="#modaledit">
  <td>3</td>
  <td>example3</td>
</tr>
</table>

<div class="modal fade" id="modaledit" tabindex="-1" role="dialog" aria-labelledby="example" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form id="editform" action="" method="POST">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">editting</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="testID" name="ID" value="ID"/>
        <div class="form-group row">
           <label for="sometext" class="col-sm-3 col-form-label">Some text</label>
           <div class="col-sm-9">
           <input type="text" id="text" name="sometext" value="sometext" />
           </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="#" id="btnDel" ID1="ID" sometext1="sometext" class="button btn-danger btn-sm">Delete</a>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      </form>
  </div>
</div>

<div class="modal fade" id="modaldel" tabindex="-1" role="dialog" aria-labelledby="example" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form id="delform" method="POST">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">deleting the entry</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="testID" name="ID" value="ID"/>
        <div class="form-group row">
           <label for="sometext" class="col-sm-3 col-form-label">Some text</label>
           <div class="col-sm-9">
           <input type="text" id="text" name="sometext" value="sometext" readonly="true" />
           </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-danger">Delete</button>
      </div>
      </form>
    </div>
  </div>
</div>

和javascript

$(document).ready(function() {
  $('.modaledit').on('hidden.bs.modal', function(e)
    { 
        $(this).removeData();
    }) ;
  });

$('#modaledit').on('show.bs.modal', function (e) {
  var opener=e.relatedTarget;//this holds the element who called the modal
   //we get details from attributes
   var ID=$(opener).attr('ID1'); 
   var sometext=$(opener).attr('sometext1');
   $('#editform').find('[name="ID"]').val(ID);
  $('#editform').find('[name="sometext"]').val(sometext);
}); 

$('#btnDel').click(function(){
     $('#modaldel').modal('show');
});

如何在模式中重用var以传递给替换模式（bootstrap）

0 个答案: