[英]How do I pass button value to modal popup view?
I have a dynamic table, and in the button value I store value of each id.我有一个动态表,在按钮值中我存储了每个 id 的值。 I want to pass my button value to a modal popup view and do a database query in the backend.
我想将我的按钮值传递给模态弹出视图并在后端执行数据库查询。 I will do that via node.js and EJS template.
我将通过 node.js 和 EJS 模板来做到这一点。 I know I can probably do this via using jQuery, but I don't know the details.
我知道我可以通过使用 jQuery 来做到这一点,但我不知道细节。
The <%= ProInfoList[j].Id %>
is my node.js loop to get each data id. <%= ProInfoList[j].Id %>
是我的 node.js 循环,用于获取每个数据 ID。 This is button code to trigger modal view:这是触发模态视图的按钮代码:
<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>
I would like to use a hidden form field to achieve my goal, but it didn't work.我想使用隐藏的表单字段来实现我的目标,但是没有用。 The form
action="/delProInfo/del"
is my backend node.js function.表单
action="/delProInfo/del"
是我的后端 node.js 函数。 This is my modal code:这是我的模态代码:
<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">×</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>
This may help.这可能会有所帮助。
<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>
Add a attributes name as title and assign id into title attribute添加属性名称作为标题并将 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">×</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>
When you will click on dropbtn button then you can get attribute name as title and set this value into hidden input type.当您单击 dropbtn 按钮时,您可以获得属性名称作为标题并将此值设置为隐藏输入类型。
<script type="text/javascript">
$(document).ready(function(){
$('.dropbtn').click(function(){
var title = $('.dropbtn').attr('title')
$('.hiddenValue').val(title);
})
})
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.