양식다시제출확인 방지하기 정보
양식다시제출확인 방지하기
본문
비타주리는 보통 폼전송을 할 떼 get 보다는 post 를 매우 매우 선호합니다.
url 의 꼬랑지에 데이터를 보이게끔 날리는 건 보안이 중요하지 않은 정보라도 어딘지 모르게 찝찝하니까요.
그럴 경우 대개 아래처럼 폼을 구현합니다. 물론 아작스는 배제합니다.
<form method="post" action="action.php">
<input name="sir">
<button>클릭</button>
</form>
여기서 중요한 건 action.php 에서는 post 정보를 받아 자신의 임무를 완성한 후 그냥 그 페이지에서 버티기를 하는 것이 아니라 원래의 문서로 돌아와야 합니다.
그래서 그누에서는 goto_url 함수를 사용하게 되는데 저는 goto_url 을 사용할 수 없는 환경까지를 감안하여 자바스크립트로 아래의 코드를 사용합니다. 이전페이지로 돌아가게 하는 거지요.
<script>
location.href = "<?php echo $_SERVER['HTTP_REFERER']; ?>";
</script>
문제는 폼으로 넘길 정보가 초간단이라서 액션문서를 만들어 주는 것이 일종의 "낭비"가 된다고 생각하는 비타주리처럼 쓸데없는 디테일에 집착심이 일어날 때입니다.
그럴 때는 본문 자체가 액션문서가 되게끔 아래처럼 작성을 하게 됩니다.
<form method="post">
<input name="sir">
<button>클릭</button>
</form>
여기서 드디어 뜻밖의 상황이 발생합니다. 폼전송이 다시 되었고 문제가 없겠거니 싶은데
새로고침을 하면 아래와 같은 메시지가 뜨게 되는 아주 성가신 경우지요.
그렇다고 여기에서 현재페이지 location.href = "<?php echo $_SERVER['REQUEST_URI']; ?>"; 를 넣어주면
"광분 새로고침" 현상이 일어나면서 아마도 그 페이지를 강제종료해야 하는 상황이 발생하게 될 것입니다.
구글링을 해 봐도 크롬을 이리저리 설정하라 등등의 미봉책만 있을뿐 뾰족한 답이 없습니다.
그럼 크롬을 그렇게 설정하지 않은 타인의 경우는요?
제가 사용하는 일종의 잔대갈빡입니다.
폼전송이 일어나기 바로 직전에 세션스토리지에 변수를 하나 만들어 딸려 보내구요.
그 변수가 존재할 때만 새로고침이 되게 하는 것입니다. 그리고 그 변수는 삭제를 해 버리는 것이죠.
아래와 같습니다.
<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>
여기서 버튼 온클릭시의 sessionStorage.reLoad=1 은 sessionStorage.reLoad='yes' 등으로 바꿔도 상관은 없습니다.
온클릭 이벤트는 언제나 폼전송 이전에 일어납니다.
그래서 로직을 분기해야 싶은 상황일 때는 온마우스다운시, 온클릭시, 온서브밋시로 구분해 주는 것도 나름대로의 선택입니다.
가장 이해하기 쉬운 실전사례가 https://sir.kr/g5_tip/19475 입니다.
!-->!-->!-->!-->5
댓글 8개

좋은팁 추천 합니다.

@푸른산타
요즘은 액션파일 따로 만들어서 다 아작스 처리하는게 대세라 사실은 고물팁입니다만
의외로 이걸 해결 못해서 낑낑거리는 글들이 구글링해보면 은근히 많습니다.
해답은 다 get 으로 처리하라는 거구요.

좋은 팁 감사 합니다.

감사합니다.

정말 많이 사용하는 신청폼 팁이라서
스크랩합니다
감사합니다

좌우지간 어떤 상황에서나 액션파일이 따로 있건 없건 간에 양식다시제출확인을 방지할 수 있을 거에요.

감사합니다~ 추천합니다!!

@아이스웨덴™
감사합니다