วิธีล้างช่องแบบฟอร์มเมื่อส่งด้วย JavaScript

เมื่อผู้ใช้ส่งแบบฟอร์มบนเว็บไซต์ที่ไม่รีเฟรชหน้าหรือเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าความสำเร็จ คุณมักจะต้องการล้างฟิลด์ของแบบฟอร์ม ต่อไปนี้คือวิธีการดำเนินการด้วย 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()
})