javascript 중복 submit 방지 / 다중 클릭 방지 / 중복 클릭 방지

2016. 12. 9. 14:24language/javascript


javascript 중복 submit 방지 / 다중 클릭 방지 / 중복 클릭 방지

 

 

웹 페이지에서 form submit 이벤트나 버튼의 클릭 등 이벤트가 여러번 발생하면 곤란할 때가 있다.

 

예를 들어 글을 등록할 때 등록버튼을 빠르게 여러번 클릭하면 같은 글이 여러번 등록될 수 있다.

 

또한 과도한 요청으로 인하여 서버에 부하가 올 수 있고

 

때때로 예기치 못한 오류가 발생할 수 도 있다.

 

이럴 경우 클라이언트 즉 javascript에서 submit 등 이벤트의 중복 실행을 방지해야 한다.

 



 

 

다음과 같은 HTML 파일이 있다고 가정하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE>
<HTML>
    <HEAD>
        <TITLE> New Document </TITLE>
        <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    </HEAD>
    <script>
    function insert(){
        alert("등록");
    }
    </script>
    <BODY>
        <form name="form">
            <input type="button" value="등록" onclick="insert();">
        </form>
    </BODY>
</HTML>
cs

 

14 번째 줄을 보면 등록 버튼이 있다.

 

이 버튼을 누를때마다 등록이 된다고 가정해 보자.

 

소스상으로는 alert 창이 계속 뜰것이다.

 

연속적으로 클릭하게 된다면 누른 횟수만큼 등록이 이뤄진다.

 

우리는 이 버튼이 1번만 동작하도록 해야한다.

 



 

아래 함수를 살펴보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * 중복서브밋 방지
 * 
 * @returns {Boolean}
 */
var doubleSubmitFlag = false;
function doubleSubmitCheck(){
    if(doubleSubmitFlag){
        return doubleSubmitFlag;
    }else{
        doubleSubmitFlag = true;
        return false;
    }
}
cs

6# : boolean 타입의 플래그 변수

8# ~ 9# : 플래그 변수가 true 이면 플래그 변수를 return 한다.

10# ~ 12# : 플래그 변수가 false 이면 플래그 변수에 true를 대입하고 false 를 return한다.

 

위 dubleSubmitCheck 함수를 호출하면 최초 1회는 false를 반환한다.

 

2회부터는 계속 true를 반환하도록 되어있다.

 

그 말인 즉슨 false를 한번 return 하고 다시는 false를 return 하지 않고 true만 return 한다.

 

이 함수를 이용해서 처음 설명한 HTML 파일의 등록버튼을 제어해보자.

 

 

맨 위의 HTML 파일에 dubleSubmitCheck 함수를 추가한 전체 HTML 파일이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE>
<HTML>
    <HEAD>
        <TITLE> New Document </TITLE>
        <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    </HEAD>
    <script>
    /**
     * 중복서브밋 방지
     * 
     * @returns {Boolean}
     */
    var doubleSubmitFlag = false;
    function doubleSubmitCheck(){
        if(doubleSubmitFlag){
            return doubleSubmitFlag;
        }else{
            doubleSubmitFlag = true;
            return false;
        }
    }
 
    function insert(){
        if(doubleSubmitCheck()) return;
 
        alert("등록");
    }
    </script>
    <BODY>
        <form name="form">
            <input type="button" value="등록" onclick="insert();">
        </form>
    </BODY>
</HTML>
 
cs

13# ~ 21# : 위에서 설명한 doubleSubmitCheck 함수이다.

24# : 등록하기 전에 doubleSubmitCheck  함수를 호출한다.

doubleSubmitCheck 함수의 return 값이 false 이면 등록하고 true이면 return 하여 insert 함수를 빠져나온다.

위에서 설명했지만 doubleSubmitCheck 함수는 한번 false를 return하고 다음부터는 계속 true만 return 한다.

 

 

TIP

doubleSubmitCheck 함수를 공통 js 파일에 작성하여 공통모듈처럼 사용하면 편하게 작성할 수 있다.

 

 

  • 프로필사진
    paige2018.03.02 11:10

    감사합니다 ㅎㅎ 중복때문에 에러가나서 고생이었는데 덕분에 해결했어요^^

  • 프로필사진
    bong2020.01.27 13:08

    그냥 맨처음에 보여주신거에서 ㅈ우복클릭안되게하게끔 고친다고 하셨는데 그냥 알림창뜨면서 클릭이 더 안들어가는데요 ...?? 굳이 고칠 필요가있는건가요??? 중복클릭의 문제로써 언급해주신것들은 별도로 알림창이 안떠서 그런문제가 있으니 해결이 필요한데 이번경우는 그냥 알림때문에 클릭이 더 안되던데

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2020.01.27 13:42 신고

      안녕하세요
      본 포스팅은 단순히 중복클릭을 막는것이 아니라 submit시에 중복으로 데이터가 전송되는 등의 문제를 화면단에서 해결하기 위해 중복클릭을 방지하는 방법입니다
      별도의 알림이나 컨펌창이 있다면 조금의 커스터마이징을 통해 해결가능합니다

  • 프로필사진
    다큰어른2020.02.28 15:39

    좋은 자료 감사합니다 ㅎㅎ 즐거운 하루 되세요

  • 프로필사진
    강한솔2020.03.17 10:01

    안녕하세요 내용과 별개로 질문하나만 해도될까요..?

    input에 입력한 내용을 X버튼을 클릭하면 지우는 거 어떻게 해야될까요??ㅠㅠㅠ

    $('.btn-del .btn-search-del').click(function() {
    $('#search_key').reset();

    });

    이렇게 해봤는데 안되네요...

  • 프로필사진
    임형균2020.03.31 14:26

    좋은자료 감사합니다~! 코로나조심하세요!

  • 프로필사진
    Favicon of https://mylink.kr BlogIcon thanks_giving2020.05.07 07:30 신고

    이거 땜에 골머리를 앓았는데, 너무나도 큰 도움이 되었습니다. 복 받으세요.