การใช้ javascript เพื่อเช็คค่าว่าง จัดทำโดย : Tung พิมพ์


การใช้ javascript เพื่อเช็คค่าว่าง

วันนี้ผมได้ นำโค้ด การเช็คค่าว่าง ของภาษา javascript เพื่อเช็คว่า Text Field ที่เราให้ใส่ ค่าต่างๆ นั้น ผู้มาใช้งาน ลืมกรอกสิ่งสำคัญอะไรไปหรือไม่ 
(ตัวอย่าง ต้ิองใส่อะไรบ้าง แล้วผู้ถ้าผู้ใช้ไม่ใส่จะมีผลอย่างไร)

ขั้นตอนการทำ

1..สร้างฟอร์มที่ต้องการ แต่ในนี้ผมสร้างแค่ test อย่างเดียวนะครับ เพื่อเป็นการทดสอบเท่านั้น

2.หลังจากนั้นให้นำโค๊ต java ไปวางในส่วน head ของเว็บ

<script language="javascript">
       function chkdata()<!--chkdata คือ ชื่อ function-->
            {
                  with(form1)<!--with คือ การเลือกตำแหน่งซึ่งในที่นี้คือ form1-->
                  {
                       if(test.value=='')
                       {
                          alert(' กรอก Test ด้วย ครับ');test.focus();<alert(' คำพูดที่ท่านต้องการ')>
                                 return false;
                               }
                      }
           }

</script>

3.หลังจากนั้นเขียนโค้ดที่ Tag Form เพื่อเรียกใช้ Function

<form id="form1" name="form1" method="post" action="" onsubmit="return chkdata();">

4.ลองทดสอบโค้ดดูครับ ถ้าท่านกด submit โดยไม่มีการพิมพ์อะไรไปก็จะมี Message ขึ้นมาเตือนให้ท่านกรอกก่อน

 

5.ถ้ายังไม่เข้าใจการทำงาน ผมมีโค้ดมาให้ดูครับ ก๊อปไปใช้งานได้เลย

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
       function chkdata()<!--chkdata คือ ชื่อ function-->
            {
                  with(form1)<!--with คือ การเลือกตำแหน่งซึ่งในที่นี้คือ form1-->
                  {
                       if(test.value=='')
                       {
                          alert(' กรอก Test ด้วย ครับ');test.focus();<alert(' คำพูดที่ท่านต้องการ')>
                                 return false;
                               }
                      }
           }

</script>

</head>
<body>
<form id="form1" name="form1" method="post" action="" onsubmit="return chkdata();">
<table width="38%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15%"><strong><font size="3" face="Verdana, Arial, Helvetica, sans-serif">test</font></strong></td>
<td width="41%"><input name="test" type="text" id="test" /></td>
<td width="44%"><input type="submit" name="Submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>

แค่นี้เองครับ หวังว่าคงไม่ยากเกินไปนะครับ อ้อ!! ที่สำคัญที่สุดและลืมกันบ่อย ก็คือ onsubmit="return chkdata(); อย่าลืมกันนะครับ

คุณอาจสนใจ
การใช้คำสั่ง DMax และ DMin
นายจืด (19,031 - 08 พ.ค. 51)
แฉ!!! ติดไวรัสจากสตรีมมิ่งได้
เว็บไทยดีดี (15,121 - 22 ก.ย. 50)
วิธีแก้ไข Virus Handy Drive (Flashy.exe)
เว็บไทยดีดี (31,029 - 25 ส.ค. 50)
ป้องกันการเขียนข้อมูลลงธัมบ์ไดรฟ์ (SP2)
เว็บไทยดีดี (26,049 - 28 ก.ค. 50)
วิธีเล่น MSN กับเมล์อื่น ๆ ที่ไม่ใช่ hotmail
เว็บไทยดีดี (15,516 - 03 พ.ย. 50)
การสร้าง Site เพื่อเก็บเว็บเพจ
Mr.GuruZ (27,038 - 26 พ.ย. 50)
โครงสร้างของภาษา PHP
Mr.GuruZ (65,106 - 03 มิ.ย. 49)
การสร้าง cookie กำหนดเวลาการอนุญาติ
Tung (33,387 - 23 ธ.ค. 50)