如何将按钮值传递给模式弹出视图？

Question

我有一个动态表，并在按钮值中存储每个 id 的值。 我想将我的按钮值传递给模式弹出视图并在后端进行数据库查询。我将通过 node.js 和 EJS 模板来做到这一点。我知道我可能可以通过使用 jQuery 来做到这一点，但我不知道细节。

<%= ProInfoList[j].Id %> 是我的 node.js 循环，用于获取每个数据 ID。 这是触发模态视图的按钮代码：

<button data-toggle="modal" data-target="#myModal" class="dropbtn" 
        value="<%= ProInfoList[j].Id %>" 
        style="background-color:transparent; border:0;margin-bottom: -10px">
    <a>Delete</a>
</button>  

我想使用隐藏的表单域来实现我的目标，但它不起作用。 action="/delProInfo/del" 是我的后端 node.js 函数。 这是我的模态代码：

<div id="myModal" class="modal fade">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Confirmation</h4>
      </div>
      <div class="modal-body">
        <p>Do you want to delete the data ?</p>
        <p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
        <input type="text" size="50"></input>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
        <form action="/delProInfo/del" method="POST" novalidate>
          <input type="hidden" name="Id" value="" />
          <button class="btn btn-primary">Sure to Delete</button>
        </form>
      </div>

Answer 1

这可能会有所帮助。

<button data-toggle="modal" data-target="#myModal" class="dropbtn" 
        title="<%= ProInfoList[j].Id %>" 
        style="background-color:transparent; border:0;margin-bottom: -10px">
    <a>Delete</a>
</button> 

添加属性名称作为标题并将id分配给标题属性

<div id="myModal" class="modal fade">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Confirmation</h4>
      </div>
      <div class="modal-body">
        <p>Do you want to delete the data ?</p>
        <p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
        <input type="text" size="50"></input>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
        <form action="/delProInfo/del" method="POST" novalidate>
          <input type="hidden" name="Id" class="hiddenValue" value="" />
          <button class="btn btn-primary">Sure to Delete</button>
        </form>
      </div>
    </div>
</div>
</div>

当您单击 dropbtn 按钮时，您可以获取属性名称作为标题并将此值设置为隐藏输入类型。

<script type="text/javascript">  
$(document).ready(function(){
    $('.dropbtn').click(function(){
            var title  = $('.dropbtn').attr('title')
            $('.hiddenValue').val(title);

    })
})
</script>