คำอธิบาย
ใช้ onclick ร่วมกับ type="submit" และ event.preventDefault() เพื่อจัดการฟอร์มโดยไม่ reload หน้า
ตัวอย่างโค้ด (HTML + JS)
<form action="#">
<label for="firstName">First Name:</label>
<input type="text" id="fName" name="firstName" placeholder="Enter your First Name" />
<button type="submit" onclick="submitForm(event)">Submit</button>
</form>
<span id="result"></span>
<script>
var firstName = null;
function submitForm(evnt) {
evnt.preventDefault();
firstName = document.getElementById("fName").value;
document.getElementById("result").innerHTML = "The First Name is=" + firstName;
}
</script>
ผลลัพธ์
กรอกชื่อ กด Submit → แสดง "The First Name is=ชื่อที่กรอก" โดยไม่ reload หน้า