[javascript] 폼 제출 이벤트 처리하기
프론트엔드 웹 애플리케이션에서 폼 제출은 매우 중요한 부분입니다. 사용자가 폼을 제출하면 이에 대한 처리가 필요합니다. 주로 JavaScript를 사용하여 폼 제출 이벤트를 처리하게 됩니다.
1. HTML 폼 마크업
먼저, HTML에서 폼을 마크업합니다.
<form id="myForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="제출">
</form>
2. JavaScript로 제출 이벤트 처리
다음으로, JavaScript를 사용하여 폼 제출 이벤트를 처리합니다.
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 폼 제출 기본 동작 방지
let name = document.getElementById('name').value;
let email = document.getElementById('email').value;
// 여기서 폼 데이터를 가지고 원하는 작업을 수행
});
위의 코드에서 addEventListener 함수를 사용해 폼의 제출 이벤트를 감지하고, 이벤트 핸들러 함수를 통해 원하는 작업을 수행합니다.
3. 폼 데이터 처리
제출 이벤트 핸들러 함수 내부에서 폼 데이터를 가져와서 서버에 전송하거나 클라이언트 측에서 추가적인 작업을 수행할 수 있습니다.
폼 데이터 가져오기:
let formData = new FormData(document.getElementById('myForm'));
let name = formData.get('name');
let email = formData.get('email');
// 가져온 폼 데이터로 원하는 작업 수행
폼 데이터를 가져오기 위해서는 FormData 객체를 사용합니다.
위와 같이 폼 제출 이벤트를 처리하여 원하는 작업을 수행할 수 있습니다.
이제 JavaScript를 사용하여 폼 제출 이벤트를 처리하는 방법을 알아보았습니다. 이를 통해 사용자가 폼을 제출할 때 필요한 작업을 수행할 수 있게 됩니다.
참고 자료: