submit 중복 클릭 막기

@sigmund unsplash

submit 중복 클릭 막기

중복 클릭으로 인해 가장 많이 발생하는 문제가 있습니다.

폼을 전송할 때 클릭이 2번 이상 발생하면서 폼이 2번 전송되어 2중으로 저장되는 경우입니다.

이러한 경우에 발생되는 submit 중복 클릭을 막는 방법을 소개해 드리겠습니다.

중복 클릭을 막는 방법에는 여러 가지가 있습니다.

 

1. disabled 처리 방법

자바스크립트 방법:

var saveBtn = document.querySelector("#savebtn");
saveBtn.addEventListener("click", function (e) {
    this.setAttribute("disabled", "disabled");
    //폼 서밋
});

jquery 방법:

$("#saveBtn").on("click",function(){                                
     $(this).attr("disabled",true);
});

 

2. confirm() 메시지 창으로 중복 클릭 차단

function clickSubmit(){
    if(confirm('저장하시겠습니까?')){
        //form submit
    }else{
        return;
    }
}

 

3. 클릭 체크 변수로 중복 클릭 차단

var submitFlag = false;

function submitCheck(){
    if(submitFlag){
        return submitFlag;
    }else{
        submitFlag = true;
        return false;
    }
}

function clickSubmit(){
if(submitCheck()){return;}
    //form submit
}

주의:  ※ submitFlag 변수를 절대 함수 안에 넣으시면 안 됩니다.