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

คุณอาจสนใจ
ตรวจสอบวันที่ย้อนหลัง - เดินหน้า
Mr.GuruZ (48,113 - 03 มิ.ย. 49)
การใส่สีให้กับตัวอักษรใน Dream
Mr.GuruZ (48,886 - 04 มิ.ย. 49)
แนะนำการใช้งาน Filter -> Texture
first (81,544 - 28 ม.ค. 51)
การโหลดรูปภาพจาก Folder ภายนอกมาใช้กับ Flash
Charoen (48,386 - 18 ส.ค. 50)
Flash Drive & Portable Software ทางเลือกใหม่ของผู้ใช้คอมพิวเตอร์
หมูขุน (20,121 - 15 มี.ค. 51)
เคล็ดไม่ลับกับการแทรกโค้ด PHP ลงใน Dream
Mr.GuruZ (50,373 - 04 มิ.ย. 49)
เทคนิคการหักเหของแสงในวัตถุโปร่งใส
เว็บไทยดีดี (27,949 - 01 เม.ย. 51)
แรมและการ์ดจอต้นเหตุของจอภาพมืด
เว็บไทยดีดี (12,559 - 11 ส.ค. 50)