코배웹_버튼attr

Web Development assistant·2021년 7월 31일
0

# cobeweb

목록 보기
2/6

개인적으로 두 번째 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>

0개의 댓글