เงื่อนไขการรับค่าเฉพาะตัวเลข (HTML + Javascript)

หัวข้อกระทู้ ใน 'Programming' เริ่มโพสต์โดย windowsbank, 20 พฤษภาคม 2018.

  1. windowsbank

    windowsbank New Member

    Code (html5):
    1.    name="myForm"
    2.    action=""
    3.    onsubmit="return checkInput()"
    4.    method="post">
    5.         Your number: <input type="text" id="num" name="number" /><br>
    6.         <input type="submit" value="Submit">
    7. </form>
    8.  
    อธิบายโค้ด
    ในส่วนของ tag form จะมี attribute คือ
    • name คือ ชื่อของฟอร์มที่นำไปใช้อ้างอิงในส่วนของ javascript
    • action เป็น url page ถัดไปเมื่อกด submit
    • onsubmit เมื่อเรากด submit จะให้ทำอะไร เช่นตัวอย่างให้ไปทำในส่วนของ function checkinPut()
    • method หมายถึง form นี้เป็นการ post
    ใน form จะมี component ตัวกัน 2 ตัว คือ
    • tag input ที่เป็นประเภท text คือช่องในข้อความหรือตัวเลข โดยมี attribute id คือ num เพื่อนำไปใช้ใน javascript
    • tag input เป็นประเภท submit คือจะเป็นลักษณะปุ่ม โดยมีข้อความบนปุ่มว่า(value) ว่า Submit

    Code (Javascript):
    1. <script>
    2.     function checkInput(){
    3.         var check = document.getElementById("num").value;
    4.         if(isNaN(check)){
    5.             alert("Please, enter number only.");
    6.             return false;
    7.         }
    8.     }
    9. </script>
    10.  
    อธิบายโค้ด
    • function checkInput() เป็นการสร้างฟังก์ชันที่มีชื่อว่า checkInput
    • var check เป็นการประกาศตัวแปรในภาษา javascript ชื่อว่า check
    • document.getElementById("num").value; เป็นการชี้ไปยังค่า value ของช่อง input ที่มี id คือ num มาเก็บไว้ในตัวแปร check
    • if(isNaN(check)) เป็นการตั้งเงื่อนไขว่า ถ้า check (ขณะนี้มีค่าเท่ากับข้อความที่เรากรอก) ไม่ใช่ตัวเลข (isNaN หมายถึง is Not a Number)
    • alert("Please, enter number only."); ให้แสดง dialog box ว่า Please, enter number only.
    • return false; เป็นการส่งค่า false กลับไปยัง parameter

    Credit: BankCoE or windowsbank
     
    แก้ไขล่าสุดเมื่อ: 20 พฤษภาคม 2018

แบ่งปันหน้านี้