Clear Form Fields เมื่อ Submit ด้วย JavaScript

เมื่อผู้ใช้ submit form บนเว็บที่ไม่ refresh หน้าหรือ redirect ไปหน้าสำเร็จ มักต้องการ clear form fields วิธีทำด้วย Vanilla JS:

1. HTML: Login Form

HTML login form ตัวอย่าง:

<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: Clear Form Fields on Submit

โค้ดนี้ clear ทุก field ทันทีที่ user กด submit:

// Run function when submit event registered
document.addEventListener("submit", function(event) {
  // Prevent default form submit
  event.preventDefault();
  // Clear all form fields
  event.target.reset();
});