한개의 Form에서 여러개 Submit 사용하기

Multiple submit in Single Form

한개의 <form>태그에서 에서 여러개의 submit 버튼을 사용할 경우가 있습니다.

무엇이 가장 우아한 방법일까요?

onclick - 1

아마 아래와 같은 코드를 많이 보셨을 겁니다. 

$("#update").click(function () {
       $("form").attr("action", "/manage/update");
});
 
$("#delete").click(function () {
       $("form").attr("action", "/manage/delete");
});

혹은 아래와 같이 submit 버튼에 onclick 시 name 등을 함께 넘겨 switch 처리로 action 부분만 변경한다던지 하는 코드를요.

<input type="submit" value="수정" onclick='btn_click("update");'>
<input type="submit" value="삭제" onclick='btn_click("delete");'>
 
<script>
    function btn_click(str){                             
        if(str=="update"){                                 
            frm1.action="/manage/update";      
        } else if(str=="delete"){      
            frm1.action="/manage/delete";      
        }  else {
            //...
        }
    }
</script>

솔직히 윗 방법이 좋아보이진 않네요.

onclick2

굳이 함수를 만들지 않고, 아래와 같이 곧바로 인라인에서 자바스크립트로 분기처리 해도 됩니다.

조금 지저분하지만 확실히 윗 방법보단 나은 것 같습니다.

<form method="post" name="form">
    <input type="submit" value="update" onclick="javascript: form.action='/manage/update';"/>
    <input type="submit" value="delete" onclick="javascript: form.action='/manage/delete';"/>
</form>

name & value

value에 지정되어 있는 값을 가져다 쓸 수도 있습니다. 

<input type="submit" name="action" value="update" />
<input type="submit" name="action" value="delete" />

단순히 이렇게 처리하는 것만으로 <form>의 action url에 파라미터로 [[name값]]=[[value값]] 이 함께 날아갑니다. 

update 버튼을 누르면 파라미터로 action=update가 추가로 더해지는 것입니다.

서버 쪽에서 action 파라미터를 받아 분기처리 하는 것이죠. 

formaction 속성 사용

formaction 속성을 사용하면 <form>태그의 action 속성은 선언하지 않아도 됩니다. 

단지 여러개의 submit 버튼에 formaction 속성을 설정해 url을 넣어주는 것만으로도 각각의 주소로 요청을 보냅니다.

get, post 방식 모두에서 잘 작동합니다. 

다만 HTML5 에서 새로 생긴 속성이라, IE 9 이하는 지원하지 않으니 주의하세요.

...
<input type="submit" value="수정" formaction="/manage/update">
<input type="submit" value="삭제" formaction="/manage/delete">