如何将按钮值传递到模式弹出视图?

时间:2018-08-20 15:35:55

标签: javascript jquery node.js ajax modal-dialog

我有动态表,在按钮值中存储每个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>

1 个答案:

答案 0 :(得分:2)

这可能有帮助。

<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>