개인적으로 두 번째 modify 방법이 맘에 든다.
버튼을 클릭함으로써 e.preventDefault();로 submit 기능을 막고, attr을 수정
1.get.jsp 방법
<script>
$(function(){
var operForm = $("#operForm");
$("button[data-oper='modify']").on("click", function(e){
operForm.attr("action", "/board/modify").submit();
})
$("button[data-oper='list']").on("click", function(e){
operForm.find("#bno").remove();
operForm.attr("action","/board/list");
operForm.submit();
})
});
</script>
<button data-oper='modify' class="btn btn-default" >Modify</button>
<button data-oper="list" class="btn btn-info">List</button>
<form id="operForm" action="/board/modify" method="get">
<input type="hidden" id="bno" name="bno" value='<c:out value="${board.bno }"/>'>
</form>
2.modify.jsp
<script>
$(function() {
var formObj = $("form");
$("button").on("click", function(e) {
e.preventDefault();
var operation = $(this).data("oper");
console.log(operation);
if (operation === "remove") {
formObj.attr("action", "/board/remove");
} else if (operation === "list") {
//location.href = "/board/list";
formObj.attr("action", "/board/list").attr("method","get");
formObj.empty();
}
formObj.submit();
});
});
</script>
<form role="form" action="/board/modify" method="post">
<button type="submit" id="modify" data-oper='modify' class="btn btn-default">Modify</button>
<button type="submit" id="remove" data- oper='remove' class="btn btn-danger">Remove</button>
<button type="submit" id="list" data-oper='list' class="btn btn-info">List</button>
</form>