양식다시제출확인 방지하기

비타주리는 보통 폼전송을 할 떼 get 보다는 post 를 매우 매우 선호합니다.

url 의 꼬랑지에 데이터를 보이게끔 날리는 건 보안이 중요하지 않은 정보라도 어딘지 모르게 찝찝하니까요.

그럴 경우 대개 아래처럼 폼을 구현합니다. 물론 아작스는 배제합니다.

[code]

<form method="post" action="action.php">
    <input name="sir">
    <button>클릭</button>
</form>

[/code]

여기서 중요한 건 action.php 에서는 post 정보를 받아 자신의 임무를 완성한 후 그냥 그 페이지에서 버티기를 하는 것이 아니라 원래의 문서로 돌아와야 합니다.

그래서 그누에서는 goto_url 함수를 사용하게 되는데 저는 goto_url 을 사용할 수 없는 환경까지를 감안하여 자바스크립트로 아래의 코드를 사용합니다. 이전페이지로 돌아가게 하는 거지요.

[code]

<script>

location.href = "<?php echo $_SERVER['HTTP_REFERER']; ?>";

</script>

[/code]

문제는 폼으로 넘길 정보가 초간단이라서 액션문서를 만들어 주는 것이 일종의 "낭비"가 된다고 생각하는 비타주리처럼 쓸데없는 디테일에 집착심이 일어날 때입니다.

그럴 때는 본문 자체가 액션문서가 되게끔 아래처럼 작성을 하게 됩니다.

[code]

<form method="post">
    <input name="sir">
    <button>클릭</button>
</form>

[/code]

여기서 드디어 뜻밖의 상황이 발생합니다. 폼전송이 다시 되었고 문제가 없겠거니 싶은데

새로고침을 하면 아래와 같은 메시지가 뜨게 되는 아주 성가신 경우지요.

그렇다고 여기에서 현재페이지  location.href = "<?php echo $_SERVER['REQUEST_URI']; ?>"; 를 넣어주면

"광분 새로고침" 현상이 일어나면서 아마도 그 페이지를 강제종료해야 하는 상황이 발생하게 될 것입니다.

구글링을 해 봐도 크롬을 이리저리 설정하라 등등의 미봉책만 있을뿐 뾰족한 답이 없습니다.

그럼 크롬을 그렇게 설정하지 않은 타인의 경우는요?

제가 사용하는 일종의 잔대갈빡입니다.

폼전송이 일어나기 바로 직전에 세션스토리지에 변수를 하나 만들어 딸려 보내구요.

그 변수가 존재할 때만 새로고침이 되게 하는 것입니다. 그리고 그 변수는 삭제를 해 버리는 것이죠.

아래와 같습니다.

[code]

<script>
if (sessionStorage.reLoad) {
    sessionStorage.clear();
    location.href = "<?php echo $_SERVER['REQUEST_URI']; ?>";
}
</script>
<form method="post">
    <input name="sir">
    <button onclick="sessionStorage.reLoad=1">클릭</button>
</form>

[/code]

여기서 버튼 온클릭시의 sessionStorage.reLoad=1 은 sessionStorage.reLoad='yes' 등으로 바꿔도 상관은 없습니다.

온클릭 이벤트는 언제나 폼전송 이전에 일어납니다.

그래서 로직을 분기해야 싶은 상황일 때는 온마우스다운시, 온클릭시, 온서브밋시로 구분해 주는 것도 나름대로의 선택입니다.

가장 이해하기 쉬운 실전사례가 https://sir.kr/g5_tip/19475 입니다.