<FORM> 태그 submit시 confirm 확인하기

게시판의 글 삭제 시 삭제 버튼을 누르면 confirm창이 뜨면서 재확인하는 작업을 구현하고 싶었다.

<script>
    function del(){
        if(!confirm('정말 삭제하시겠습니까?')){
            return false;
        }
    }
</script>

<form style="display:inline;" method="post">
    <button onclick="javascript:del()" type="submit">삭제</button>
</form>

위와 같이 코드를 작성하고 버튼을 클릭하면 confirm에서 뭘 선택했는지 (확인/취소)와 상관없이 무조건 submit이 넘어가는 문제가 발생했다.

 

잘은 모르겠지만 내가 생각했을 때

1. 버튼 클릭과 동시에 submit이 바로 제출되거나

2. script에서 false를 return 할 때 submit에 대한 false가 일어나지 않음

때문일 것 같다. (혹시 아시는분은 댓글로 알려주시면 감사하겠습니다 :) )

 

여튼 열심히 찾아본 결과 <form>태그 내에서 onsubmit을 사용해 해결할 수 있었다.

<form style="display:inline;" method="post" onsubmit="return confirm('정말 삭제하시겠습니까?');">
    <button type="submit">삭제</button>
</form>

처음의 script문은 그냥 지우고 onsubmit을 활용하면 confirm문의 결과에 따라 submit이 진행된다 :)