[英]Bootstrap: load modal with ajax using form param
我用几种带有按钮的表单来页面,例如:
<form name="openconfirm">
<input type="hidden" name="itemid" value="123">
<button type="submit" class="btn btn-sm btn-success ">Item 123</button>
</form>
<form name="openconfirm">
<input type="hidden" name="itemid" value="124">
<button type="submit" class="btn btn-sm btn-success ">Item 125</button>
</form>
<form name="openconfirm">
<input type="hidden" name="itemid" value="125">
<button type="submit" class="btn btn-sm btn-success ">Item 125</button>
</form>
每个按钮应打开一个引导程序模态,其中包含有关所选项目的更多信息(因此,模态内容应从已使用POST或GET传递了itemid参数的远程页面加载)
我相信应该是这样的:
<script>
$(function(){
$('form[name="openconfirm"]').on('submit', function(){
itemid = itemid input from form; <- Not actual code
openModal(#myModal, "file.php?itemid=" + itemid); <- Not actual code
})
})
</script>
希望您能理解我的需求并提供一些解决方案。 如果您能提供实际的代码,我将不胜感激,因为我是javascript新手。 我愿意提供比我提供的更好的选择。
非常感谢
尝试使用此HTML标记
<button type="button" data-toggle="modal" data-target="#myModal" id="123" class="btn someclass">Item 123</button>
<button type="button" data-toggle="modal" data-target="#myModal" id="124" class="btn someclass">Item 124</button>
<button type="button" data-toggle="modal" data-target="#myModal" id="125" class="btn someclass">Item 125</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">LOADED CONTENT</div>
</div>
</div>
还有这个jQuery
$(function () {
$('.someclass').on('click', function () {
var itemid = $(this).attr('id');
$(".modal-content").load("/file.php?itemid=" + itemid);
});
});
当前,它不会加载任何新内容,因为URL /file.php?itemid=123
不存在,但可以在现有项目中尝试使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.