javascript - 如何将按钮值传递给模态弹出 View ？

Question

我有一个动态表，在按钮值中我存储了每个 id 的值。我想将我的按钮值传递给模式弹出 View 并在后端执行数据库查询。我将通过 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>