Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

การแก้ไข input type=submit ที่ไม่ทำงานใน JavaScript

คำอธิบาย

ใช้ 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 หน้า