[책] 자바스크립트 코드 레시피 278 - 159일차

폼 전송하기

• 폼 전송 전 추가 작업을 처리하고 싶을 때
• 폼 전송 전 확인 작업을 하고 싶을 때

구문

submit 폼 전송 시 이벤트

설명

폼 요소의 submit 이벤트를 감시하여 폼 전송 전 추가 작업을 처리할 수 있습니다. 해당 이벤트로 폼 전송 전의 데이터를 가공하거나 데이터 전송 여부를 확인할 수 있습니다. 전송 취소 후 재입력을 요구하고 싶을 때는 event.preventDefault()를 사용해 이벤트를 해제합니다.

실습

index.html

<form>
  <label for="myText">텍스트 입력해 주세요.</label>
  <input type="text" name="myText" id="myText">
  <button>전송하기</button>
</form>

---

script.js

const formElement = document.querySelector('form');
formElement.addEventListener('submit', handleSubmit);
function handleSubmit(event) {
  const isYes = confirm('이 내용으로 전송하시겠습니까?');
  console.log(isYes);

  // 취소 선택한 경우 if 실행
  if (isYes === false) {
    event.preventDefault();
    console.log(isYes);
  };
};