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

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

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

ภาพประจำตัวสมาชิก
M030
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 532
ลงทะเบียนเมื่อ: 07/09/2015 10:06 am

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

โพสต์โดย M030 » 22/09/2015 5:05 pm

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

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

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

<!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) เปิดดู 471 ครั้ง


จากนั้นเรามาสร้าง JavaScript ของฟังก์ชัน checkNull กันค่ะ
:arrow: JavaScript โดยส่วนใหญ่เราจะสร้างไว้ในส่วนของ head กันนะค่ะ

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


<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) เปิดดู 471 ครั้ง
แก้ไขล่าสุดโดย M030 เมื่อ 23/09/2015 10:15 am, แก้ไขไปแล้ว 1 ครั้ง.

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 12102
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

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

โพสต์โดย thatsawan » 23/09/2015 1:11 am

:like:

ภาพประจำตัวสมาชิก
jataz2
PHP Super Member
PHP Super Member
โพสต์: 200
ลงทะเบียนเมื่อ: 22/02/2011 11:48 am

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

โพสต์โดย jataz2 » 23/09/2015 1:11 pm

รูปภาพ


  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 12 และ บุคคลทั่วไป 0 ท่าน