Devdit
 

JavaScript ดึงข้อมูลจาก TextBox ของ HTML

2.5K

สอนเขียนภาษา JavaScript ดึงข้อมูลจาก TextBox ของ HTML บทความนี้แนะนำการอ้างถึง TextBox และดึงค่าใน TextBox ออกมาเก็บไว้ที่ JavaScript พร้อมแสดงค่าดังกล่าวด้วยคำสั่ง console.log สามารถเขียนคำสั่งได้ดังนี้

 

ตัวอย่าง JavaScript ดึงข้อมูลจาก TextBox ของ HTML

<input type="text" value="สวัสดี Devdit" id="txt"><br/>
<input type="button" onclick="getValueTextBox()" value="ดึงข้อมูลจาก TextBox">
<script>
    function getValueTextBox() {
        let txt = document.getElementById("txt").value;
        console.log( "ดึงข้อมูลจาก TextBox = "+txt );
    }
</script>

ผลลัพธ์

ดึงข้อมูลจาก TextBox = สวัสดี Devdit

คำอธิบาย

JavaScript ดึงข้อมูลจาก TextBox เริ่มต้นกำหนด id = txt ให้กับ TextBox เมื่อผู้ใช้งานกดปุ่มจะเรียกใช้ฟังก์ชัน getValueTextBox โดยภายในฟังก์ชัน จะมีการอ้างถึงค่าใน id = txt ด้วยคำสั่ง document.getElementById และดึงค่าด้วยคำสั่ง value เก็บไว้ที่ตัวแปร txt จากนั้นนำตัวแปร txt มาแสดงผ่านคำสั่ง console.log

แก้ไข 1 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ