저장 버튼(save button) 더블클릭 방지.

사이트를 사용하다가 보면, 사용자가 버튼을 연속으로 클릭하는 경우가 있습니다. 이런 경우 데이터를 2번 저장하기 때문에 관련된 처리가 이상하게 되는 경우가 있으며, 중요 데이터를 처리하는 경우라면 이러한 경우를 예상하고 방지해야 하기 때문에 여러가지 기법들이 동원됩니다.

여기서는 간단하게 HTML과 자바스크립트로 이런 방법을 처리하는 것을 알아보겠습니다.

1. Image Button 인 경우 (이미지 버튼)

<img id=”save” name=”save” src=”save.png” onclick=”javascript:save(); this.style.visibility=’hidden'; ” >

이렇게 하면, 버튼을 클릭함과 동시에 버튼 이미지가 보이지 않게 되어 버립니다. 물론 자바스크립트 함수인 save() 안에서 함수 종료 처리 전에, 다시 이미지 버튼을 보이도록 처리를 해주어야 합니다.

2. input 형태의 버튼인 경우

<input type=”button” onClick=”javascript:save(); this.disabled=true; ”>

이번 경우에는 input 타입으로 된 버튼으로 클릭하면 곧바로 사용 불가능한 버튼으로 변경되며, 자바스크립트 save() 함수 내부에서 다시 disabled 를 풀어주는 처리를 해주셔야 합니다.

간단하게는 위에 나열된 2가지 방법을 이용하면 손쉽게 더블클릭 방지를 처리할 수 있습니다. 도움이 되셨으면 좋겠습니다.

감사합니다.