วิธีการสร้าง java Script เช็กค่าว่าง

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
M030
PHP Super Hero Member
PHP Super Hero Member
Posts: 532
Joined: 07/09/2015 10:06 am

วิธีการสร้าง java Script เช็กค่าว่าง

Post by M030 »

สำหรับ JavaScriptนั้นสมารถนำมาใช้ได้หลายอย่างเลยค่ะ แต่วันนี้แอดมินจะมาสอนวิธีการสร้าง JavaScript ในการเช็กค่าว่างของ text box กันค่ะ

เริ่มกันที่สร้าง form เพื่อรับค่ากันก่อนค่ะ

Code: Select all

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Java Script check null</title>
 </head>
 <body>
 <FORM METHOD="POST" NAME="forms" ACTION="#" onsubmit="javascript:return checkNull();">
  <h1>Welcome to Mindphp</h1>

ชื่อ : <input type="text" name="firstname" /> <br />
นามสกุล : <input type="text" name="lastname" /> <br />
ชื่อเล่น : <input type="text" name="nickname" /> <br />

<input type="submit" Value="Submit" />

 </form>
 </body>
</html>
 
อย่าลืมสร้าง form เพื่อไว้ใช้เรียกฟังก์ชันใน JavaScript มาใช้งานด้วยนะค่ะ ในที่นี้แอดมินตั้งชื่อ formว่า name="forms" ในส่วนของ onsubmit จำเป็นต้องมีนะค่ะเพราะใช้สำหรับเรียกฟังก์ชันใน JavaScript โดยแอดมินกำหนดให้เป็น onsubmit="javascript:return checkNull();" นั่นหมายความว่าเรีกใช้ฟังก์ชัน checkNull นั่นเองค่ะ เรามาดูรูปแบบของฟอร์มที่เราสร้างกันค่ะ
form_JS.png
form_JS.png (23.05 KiB) Viewed 840 times
จากนั้นเรามาสร้าง JavaScript ของฟังก์ชัน checkNull กันค่ะ
:arrow: JavaScript โดยส่วนใหญ่เราจะสร้างไว้ในส่วนของ head กันนะค่ะ

Code: Select all

<script language="javascript">
      function checkNull() {

        if(document.forms.firstname.value=="") { // เป็นการเช้กค่าว่าช่องนี้เป็นค่าว่างมั้ย (forms = ชื่อ form), (firstname = ชื่อหรือ name ของ textbox )
            alert("กรุณาระบุชื่อ") ;  // alert จะเป็นการแจ้งเตือนว่า กรุณากรอกชื่อ ^^
            document.forms.firstname.focus() ; // .focus() ตรงนี้คือระบุตำแหล่งที่เราต้องการเช็กค่ะ
            return false ;
        }
        if(document.forms.lastname.value=="") {
            alert("กรุณาระบุนามสกุล") ;
            document.forms.lastname.focus() ;
            return false ;
        
        }
        if(document.forms.nickname.value=="") {
            alert("กรุณาระบุชื่อเล่น") ;
            document.forms.nickname.focus() ;
            return false ;
        
        }
        else 
            return true ;
        }


  </script>
ลอง coppy โค้ดหรือลองสร้างตามนี้แล้วลอง run ผลดูนะค่ะ ^^ ถ้าถูกต้องผลจะออกมาตามรูปด้านล่างค่ะ หากเราลืมกรอกช่องไหนมันจะแจ้งเตือนแบบนี้
JS_test.png
JS_test.png (28.53 KiB) Viewed 840 times
Last edited by M030 on 23/09/2015 10:15 am, edited 1 time in total.
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “PHP Knowledge”

Who is online

Users browsing this forum: Google Adsense [Bot] and 15 guests