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

คุณอาจสนใจ
การใช้งาน PowerPoint โดยเลือกใช้รูปแบบ Blank presentation
หมูขุน (14,992 - 04 ก.พ. 50)
การเปลี่ยน Title ของเว็บเพจ
Mr.GuruZ (50,124 - 04 มิ.ย. 49)
แสดงหรือซ่อนปุ่มบนแุถบเครื่องมือ
นายนุก (20,677 - 06 มี.ค. 51)
การจัดแสงโดยใช้ Key Light, Fill Light และ Back Light
เว็บไทยดีดี (31,119 - 02 เม.ย. 51)
ทำปุ่มเคลื่อนไหวใส่เว็บด้วย Flash MX (ตอนที่ 2)
มรกต อุ่นเสรี (33,109 - 29 ก.ย. 50)
แอนิเมชันสุดเฉียบ ใน Flash MX กับงาน Multimedia(ตอนที่ 1)
กฤษฎา ศิริชัยสิทธ (48,167 - 15 ก.ย. 50)
การนำภาพมาใช้กับรูปทรง 3 มิติที่สร้างจากการทำ 3D Transform
Lee (84,308 - 25 ธ.ค. 49)
การใช้เส้นสร้างตาราง
หมูขุน (89,115 - 09 มิ.ย. 51)