button 버튼 다양하게 사용하기

 

get.jsp

 

<div style="text-align:center;">
<button data-oper='modify' class="btn btn-primary"
<%-- onclick="location.href='/board/modify?bno=${board.bno}'" --%>>Modify</button>
<button data-oper='list' class="btn btn-info"
<%-- onclick="location.href='/board/list'" --%>> List</button>
</div>

<form id='operForm' action="/board/modify" method="get">
<input type='hidden' id='bno' name='bno' value="${board.bno}">
</form>

 

 

<script>
$(document).ready(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>

 

---

modify.jsp

 

<button type="submit" data-oper='modify' class="btn btn-primary">Modify</button>
<button type="submit" data-oper='remove' class="btn btn-danger">Remove</button>
<button type="submit" data-oper='list' class="btn btn-info">List</button>

 

 

 

 

<script type="text/javascript">
$(document).ready(function(){

var form = $("#myform");

console.log(form);

$('button').on("click", function(e){

e.preventDefault();  //submit 처리되는것 막아

var operation = $(this).data("oper");

if(operation === 'remove'){
form.attr("action", "/board/remove");
} else if(operation === 'list'){

form.attr("action", "/board/list").attr("method","get");
form.empty();
//self.location = "/board/list";
//return;
}
form.submit();

});

});

</script>

 

 

---

list.jsp

 

 

<button id='regBtn' type="button" class="btn btn-xs btn-primary float-right">Register</button>

 

  
            
<script type="text/javascript">
$(document).ready(function(){

/* 등록버튼 */
$("#regBtn").on("click", function(){
self.location = "/board/register";
})

});
</script>