jQuery 폼 입력 처리

✏️ 폼 입력 처리

웹에서 사용자로부터 정보를 입력받는 기본 수단은 폼(form)입니다. jQuery를 사용하면 폼 데이터를 쉽게 읽고, 유효성 검사를 하며, 제출 이벤트를 제어할 수 있습니다.

📌 주요 jQuery 메서드

• .val() : input, select, textarea의 값을 가져오거나 설정
• .prop() : 체크박스나 라디오의 체크 여부 확인
• .submit() : 폼 제출 이벤트에 반응
• .serialize() : 폼의 데이터를 URL 인코딩된 문자열로 변환

🧪 예제 1 : 입력값 읽기

<input type="text" id="email" placeholder="이메일 입력">
<button id="checkEmail">확인</button>

<script>
  $('#checkEmail').click(function() {
    const email = $('#email').val();
    alert('입력된 이메일: ' + email);
  });
</script>
  

위 코드는 버튼을 누르면 input에 입력된 값을 가져와서 알림 창으로 표시합니다.

🧪 예제 2 : 체크박스 상태 확인

<input type="checkbox" id="agree"> 약관에 동의합니다
<button id="submitBtn">제출</button>

<script>
  $('#submitBtn').click(function() {
    if ($('#agree').prop('checked')) {
      alert('제출 완료!');
    } else {
      alert('약관에 동의해주세요.');
    }
  });
</script>
  

체크박스의 체크 여부를 prop('checked')로 확인할 수 있습니다.

📨 폼 제출 막기와 유효성 검사

<form id="loginForm">
  <input type="text" id="user" placeholder="아이디"><br>
  <input type="password" id="pass" placeholder="비밀번호"><br>
  <button type="submit">로그인</button>
</form>

<script>
  $('#loginForm').submit(function(e) {
    e.preventDefault(); // 기본 제출 막기
    const user = $('#user').val();
    const pass = $('#pass').val();

    if (user === '' || pass === '') {
      alert('모든 항목을 입력해주세요.');
    } else {
      alert('로그인 처리 중...');
      // 실제 전송: this.submit(); 또는 AJAX 사용
    }
  });
</script>
  

submit 이벤트에서 e.preventDefault()를 사용하면 페이지 새로고침 없이 유효성 검사를 할 수 있습니다.

📦 예제 3 : 폼 전체 데이터 전송 (serialize)

<form id="survey">
  이름: <input type="text" name="name"><br>
  성별: 
  <input type="radio" name="gender" value="남">남
  <input type="radio" name="gender" value="여">여<br>
  <button type="submit">제출</button>
</form>

<script>
  $('#survey').submit(function(e) {
    e.preventDefault();
    const data = $(this).serialize();
    alert('보낼 데이터: ' + data);
  });
</script>
  

. serialize()는 폼의 모든 데이터를 자동으로 문자열로 변환해 줍니다. AJAX로 서버에 보낼 때 매우 유용합니다.

📌 마무리

jQuery를 활용하면 복잡한 폼 처리도 손쉽게 구현할 수 있습니다. 유효성 검사, 체크 상태 확인, 폼 데이터 전송까지 간결하게 제어 가능하죠.