[jQuery] <form>태그의 action/method 속성 변경후 button에 submit 기능 추가하여 적용하기

body영역에 선언된 한개의 form태그 안에서는 submit버튼을 한개밖에 만들수가 없습니다.

 

만약 한 페이지 body안에서 요청을 수행해야할 버튼이 두개가 존재하고, 각 버튼을 눌렀을 때 둘다 form이 작동하면서 action과 method가 서로다른 방식으로 적용되어 작동을 해야하는 상황이 발생할때,

하나는 submit버튼 나머지 버튼은 일반 button type속성으로 만들어야합니다.

 

이때 일반 button 옵션 버튼에 클릭 이벤트를 발생시켜 주면서 이벤트 내용은 form태그의 action과 method방식을 해당클릭이벤트가 발생했을 때 에만 변경시킨후 submit처리까지 할수 있는 방법이 있습니다.

<form id="formObj" role="form" action="<c:url value='/board/delete'/>" method="post">  
    <input type="submit" value="삭제" class="btn btn-danger" onclick="return confirm('정말로 삭제하시겠습니까?')">&nbsp;&nbsp;
    <input id="modBtn" type="button" value="수정" class="btn btn-warning"  style="color:white;">
</form>

<script>
$(function(){ 
    var modifyBtn = $("#modBtn");
    
    modifyBtn.click(function() {
        console.log('수정버튼이 클릭됨!');
        const formElement = $("#formObj"); 
        formElement.attr("action","/board/modify");
        formElement.attr("method","post");
        formElement.submit();
    })
});
</script>

 

JQuery를 통해 일반 Button을 css id선택자로 접근하여 변수에 담아줍니다.

button선택자를 저장한 변수에 click이벤트를 발생시킵니다.

클릭했을때 fucntion함수로 기능을 추가합니다.

form태그를 css id선택자로 접근하여 변수에 한번더 담아주고

form태그를 담은 변수에 attr("키","값") 메서드를 통해 "키"에는 변경할 속성을 기입하고, "값"에 속성에대해 부여할?변경할? 값을 적어줍니다.

 

method와 action에 각각 변경,부여 하고자 하는 값을 저장해 준뒤 submit()함수를 통해 submit 기능을 발생시킵니다.

 

 

솔직히 이 방법은 POST,GET 으로 나뉘게될때 보다는 둘다 POST로 보내야할 때 쓰면 좋을거같습니다.

 

get방식이라면 버튼을 눌렀을때 location속성값으로 쉽게 페이지전환을 할 수 있기 때문입니다.

<input type="button" value="목록" onclick="location='/modify?boardNo=${boardNo}';" />

 

하지만 만약 둘다 POST여도 새로운 방법이 한가지 더 있는데

<form id="formObj" role="form" action="<c:url value='/board/delete'/>" method="post">  
    <input type="submit" value="삭제" class="btn btn-danger" onclick="return confirm('정말로 삭제하시겠습니까?')">&nbsp;&nbsp;
</form>

<form id="formObj" role="form" action="<c:url value='/board/delete'/>" method="post">  
    <input type="submit" value="수정" class="btn btn-warning"  style="color:white;">
</form>

<form>태그를 두개 만들어 버리는 겁니다.