JavaScript로 제출 시 양식 필드를 지우는 방법

사용자가 페이지를 새로 고치지 않거나 사용자를 성공 페이지로 리디렉션하는 웹 사이트에서 양식을 제출할 때 양식 필드를 지우고 싶은 경우가 많습니다. 바닐라 자바스크립트로 이를 수행하는 방법은 다음과 같습니다.

1. HTML:로그인 양식

다음은 사용자가 로그인(제출) 버튼을 누르기 전에 사용자 이름과 비밀번호를 입력하는 일반적인 HTML 로그인 양식입니다.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" />

  <label for="password">Password:</label>
  <input type="password" id="password" />

  <button>Login</button>
</form>

2. JavaScript:제출 시 양식 필드 지우기

이 코드는 사용자가 제출을 누르는 즉시 양식의 모든 필드를 지웁니다.

// Run function when a submit event is registered
document.addEventListener("submit", function(event) {
  // Prevent default form submit
  event.preventDefault()

  // Clear all form fields
  event.target.reset()
})