環境:
springboot2.2.5
thymeleaf 3.0.11
點擊button按鈕,彈出模態窗,並傳值
<button class="btn btn-sm btn-danger"
data-toggle="modal" data-target="#myModal"
th:onclick="'Valuess(' + ${leimu.leimuId} + ');'">
刪除
</button>
這裏一定要注意,th:onclick向js函數傳值的形式!!
js:
<script>
<!--向模態彈窗傳值-->
function Valuess (leimuId) {
console.log("valuesssssss");
$("#delLeimuId").val(leimuId);
}
</script>
模態窗html
<!--彈窗-->
<form method="post" action="" class="form-horizontal" role="form" name="form_modal" style="margin: 20px;">
<!--發送delete請求-->
<input type="hidden" name="_method" value="delete">
<div class="modal fade" id="myModal" data-backdrop="static" th:tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">提醒</h5>
<button th:type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="modalContent">
<!--要刪除的類目id-->
<input type="hidden" id="delLeimuId" name="delLeimuId" value="">
<p>您是否要安全刪除?</p>
<p>是,保存相應菜品;否,刪除相應菜品</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary " name="allDelBtn" onclick="allDel();">
否
</button>
<button class="btn btn-primary " name="safeDelBtn" onclick="safeDel();">
是
</button>
</div>
</div>
</div>
</div>
</form>
模態彈窗兩個提交按鈕,分別提交到不同頁面
<script>
function allDel () {
var id = document.form_modal.delLeimuId.value;
//all刪除當前類目
document.form_modal.action = "/leimu/allDel/"+id;
document.form_modal.submit();
// $("#deleBtnForm").attr("action","/leimu/allDel/"+id).submit();
// return false;
}
function safeDel () {
var id = document.form_modal.delLeimuId.value;
document.form_modal.action = "/leimu/safeDel/"+id;
document.form_modal.submit();
//安全刪除當前類目
// $("#deleBtnForm").attr("action", "/leimu/safeDel/" + id).submit();
// return false;
}
</script>