jQuery ดึงข้อมูลใน TextBox มาแสดงที่ div หน้าเว็บไซต์

สอนเขียน jQuery ดึงข้อมูลใน TextBox มาแสดงที่ div หน้าเว็บไซต์ บทความนี้แนะนำการดึงข้อมูลใน input type text ของ HTML ด้วย jQuery Framework และนำค่าดังกล่าวมาแสดงที่ div บนหน้าเว็บไซต์ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง jQuery ดึงข้อมูลใน TextBox มาแสดงที่ div หน้าเว็บไซต์

<input type="text" id="txt">
<input type="button" id="btn" value="ดึงค่าจาก TextBox">
<div id="result"></div>

<script>
    $("#btn").click(function(){
        $("#result").text( "ค่าใน TextBox คือ "+$("#txt").val() );
    });
</script>

ผลลัพธ์

ค่าใน TextBox คือ Hello, Devdit

jQuery ดึงข้อมูลใน TextBox มาแสดงที่ div หน้าเว็บไซต์ โดยกำหนดให้ div ดังกล่าวมีค่า id เท่ากับ result โดยใช้คำสั่ง .text เพื่อกำหนดข้อความที่จะแสดง โดยข้อความดังกล่าวคือ ข้อมูลที่อยู่ใน TextBox ซึ่งอ้างอิงผ่าน id เท่ากับ txt โดยใช้คำสั่ง .val() เพื่อดึงข้อมูลที่อยู่ใน TextBox ออกมาแสดงที่ div หน้าเว็บไซต์