การใช้ 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(); อย่าลืมกันนะครับ

คุณอาจสนใจ
วิธีการทำ Selection โดยใช้ Quick Mask Mode
Lee (95,012 - 20 ก.ย. 49)
การบันทึก Query ( Save Query )
คุณอ้อม (21,596 - 30 เม.ย. 50)
การ์ตูน Flash อย่างง่ายตอนที่ 4 (การทำMovie Shortการ์ตูนขยับ)
Black-Hawk (194,344 - 21 ม.ค. 51)
การสร้างตารางใน Dream
Mr.GuruZ (45,109 - 04 มิ.ย. 49)
ขั้นตอนการสร้าง Site Map
webthaidd (102,243 - 12 มี.ค. 51)
การทำ text link เพื่อ ปิดหน้า BROWSER ทันที
Tung (23,394 - 27 พ.ย. 50)
การส่ง mail จาก Flash
Tung (47,137 - 06 ธ.ค. 50)
วิธีเล่น MSN กับเมล์อื่น ๆ ที่ไม่ใช่ hotmail
เว็บไทยดีดี (15,516 - 03 พ.ย. 50)