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

สอนเขียนภาษา 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