點擊按鈕彈出模態窗,並向模態窗傳值

環境:
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">&times;</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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章