개요
웹 개발에서 사용자가 버튼을 클릭했을 때 특정 동작을 수행하도록 만드는 것은 매우 기본적이면서도 중요한 작업입니다. 이번 글에서는 jQuery를 활용하여 버튼 클릭 시 양식(form)이 제출되었다는 알림창(alert)을 표시하는 방법을 단계별로 살펴보겠습니다.
버튼 요소 준비하기
먼저 아래와 같이 고유한 id를 가진 버튼을 HTML에 추가합니다.
<button id="submitForm">Submit</button>
여기서는 버튼의 id를 submitForm으로 지정했습니다. 이 id 값을 기준으로 클릭 이벤트를 바인딩하게 됩니다.
클릭 이벤트로 알림창 생성하기
버튼의 id를 선택자로 사용하여 클릭 이벤트가 발생할 때 alert() 함수를 호출하면 됩니다.
$("#submitForm").click(function() {
alert("양식이 제출되었습니다.");
});위 코드는 id가 submitForm인 요소가 클릭될 때마다 "양식이 제출되었습니다."라는 메시지가 담긴 알림창을 화면에 표시합니다.
전체 예제 코드
아래는 위 내용을 모두 포함한 완전한 HTML 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
CollegeId=<input id="collegeId" type="text"><br />
CollegeName= <input id="collegeName" type="text"><br />
<button id="submitForm">Submit</button>
<script>
$("#submitForm").click(function() {
alert("양식이 제출되었습니다.");
});
</script>
</body>
</html>프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 "anyName.html(index.html)"로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그다음 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
실행 결과
프로그램을 실행하면 다음과 같은 화면이 나타납니다.
버튼을 클릭하면 아래와 같이 알림창이 표시됩니다.
마무리
이처럼 jQuery의 click() 메서드를 사용하면 몇 줄의 코드만으로도 버튼 클릭 이벤트를 손쉽게 처리할 수 있습니다. 실제 프로젝트에서는 alert() 대신 커스텀 모달이나 토스트 메시지를 활용하면 더욱 세련된 사용자 경험을 제공할 수 있습니다.