คุณสมบัติ name ของ Button
คุณสมบัติ name ที่เกี่ยวข้องกับแอตทริบิวต์ name ของอิลิเมนต์ <button> ใช้สำหรับตั้งค่าหรือคืนค่าของแอตทริบิวต์ name ของปุ่ม แอตทริบิวต์ name ใช้ในฟอร์มเพื่อเลือกอิลิเมนต์ด้วย JavaScript หรือส่งค่าพร้อม form data
ไวยากรณ์ (Syntax)
การกำหนดค่า name
buttonObject.name = name
พารามิเตอร์: name - ชื่อของปุ่ม
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการเปลี่ยน name attribute ของปุ่ม
<!DOCTYPE html>
<html>
<body>
<button id="button1" name="btn1">BUTTON</button>
<p>Click the button below and change the above button name.</p>
<button onclick="change()">CHANGE</button>
<p id="Sample"></p>
<script>
function change() {
document.getElementById("button1").name = "SECOND BUTTON";
var x = document.getElementById("button1").name;
document.getElementById("Sample").innerHTML = "The new button name is " + x;
}
</script>
</body>
</html>
ผลลัพธ์
เริ่มต้น: ปุ่มมี name="btn1"
คลิก CHANGE: name เปลี่ยนเป็น "SECOND BUTTON" และแสดงข้อความยืนยัน
คำอธิบายเพิ่มเติม
- แอตทริบิวต์
nameระบุชื่อของปุ่ม ใช้เมื่อส่งฟอร์ม - จะส่งคู่name=valueไปกับ form data - มีประโยชน์เมื่อมีหลายปุ่ม submit ในฟอร์มเดียวกัน - server รู้ว่าปุ่มไหนถูกกด
- ตัวอย่าง:
<button name="action" value="save">Save</button>และ<button name="action" value="delete">Delete</button> - เข้าถึงได้ผ่าน
document.getElementsByName("name")คืน NodeList - ต่างจาก
idที่ต้อง unique,nameสามารถซ้ำได้ (radio buttons, multiple submits)
