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

คุณอาจสนใจ
การสร้างโลโก้ Central
เว็บไทยดีดี (44,156 - 20 ต.ค. 50)
Head Modeling Using NURBS
เว็บไทยดีดี (30,042 - 04 เม.ย. 51)
เทคนิคการสอนเอฟเฟ็กต์ Mask ใน Macromedia Flash (ตอนที่ 1)
วิโรจน์ ชัยมูลี (47,399 - 29 ก.ย. 50)
การ Fixed ภาพพื้นหลัง หยุดนิ่งด้วย HTML
Black-Hawk (67,982 - 29 ม.ค. 51)
การใช้เส้นสร้างตาราง
หมูขุน (93,789 - 09 มิ.ย. 51)
การติดตั้งภาษาไทยให้ Dreamweaver
Mr.GuruZ (52,435 - 04 มิ.ย. 49)
สรุปคำสั่ง Action Script บน Flash MX (ตอนที่ 3)
สหรัถ แซ่ตั้ง (48,378 - 08 ก.ย. 50)
การใช้แบบฟอร์ม Organization Char
หมูขุน (13,300 - 04 ก.พ. 50)