การใส่ค่าในช่อง input ด้วย javascript เพื่อจะได้มีค่าอยู่ใน textbox

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: การใส่ค่าในช่อง input ด้วย javascript เพื่อจะได้มีค่าอยู่ใน textbox

การใส่ค่าในช่อง input ด้วย javascript เพื่อจะได้มีค่าอยู่ใน textbox

โดย jamepiyawat » 12/11/2019 2:36 pm

สำหรับใครที่เคยทำแบบฟอร์กรอกข้อมูลลงเว็บไซต์แล้วก็คงจะต้องทำช่องที่เป็น textbox เพื่อให้เพื่อให้ผู้ใช้ได้กรอกกันแต่ว่าถ้าใช้ HTML ตามปกติเราก็จะได้แต่ช่องที่เป็น textbox ก็จะเป็นแต่ textbox เปล่า ๆ จำเป็นจะต้องให้ผู้ใช้เข้ามากรอกขอมูลก่อนถึงจะมีข้อมูลส่งไปได้บทความนี้ก็จะเป็นการสอนทำให้ textbox ที่เราสร้างขึ้นมานั้นมีข้อความอยู่ใน textbox ด้วย
Selection_999(1547).png
Selection_999(1547).png (6.81 KiB) Viewed 8048 times
จากรูป จะเห็นได้ว่ามีแค่ textbox แต่ไม่มีข้อความด้วนใน

ถ้าเราใส่โค้ดแบบนี้

โค้ด: เลือกทั้งหมด

<div class="row">
      <div class="col-md-6 mb-3">
        <label for="firstName">First name</label>
        <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
      </div>
    </div>
    <script>
      document.getElementById('firstName').value = 'test';
    </script>
ผลลัทธ์ที่ได้
Selection_999(1548).png
Selection_999(1548).png (6.59 KiB) Viewed 8048 times

จากโค้ดจะเห็นได้ว่า
ในช่อง input ของเราจะมี id อยู่ด้วยให้เราเอา id นี้แหละไปกำหนดใช่ใน javascript ในแท็ก script เราก็จะใช้คำสั่ง getElementById('firstName') แล้วตามด้วยคำสั่ง value = 'ข้อความ'


เท่านี้เราก็จะได้ข้อความที่อยู่ใน textbox กันแล้วในส่วนของข้อความเราอาจจะเอาตัวแปลของ php มาแสดงก็ได้เพื่อก็หวังว่าผู้ที่เข้ามาอ่านทความนี้จะได้รับความรู้ความเข้าใจเกี่ยวกับ javascript มากขึ้นนะครับ

ข้างบน