การสร้างเว็บไซต์ด้วย Dreamweaver(2) : การดักข้อมูลที่มีค่าว่างด้วยคำสั่ง Javascript

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

dawthana
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 604
ลงทะเบียนเมื่อ: 07/12/2016 10:55 am

การสร้างเว็บไซต์ด้วย Dreamweaver(2) : การดักข้อมูลที่มีค่าว่างด้วยคำสั่ง Javascript

โพสต์โดย dawthana » 08/12/2016 4:06 pm

การดักข้อมูลที่มีค่าว่างด้วยคำสั่ง Javascript
สร้างเว็บไซต์ด้วย Dreamweaver (ดรีมเวฟเวอร์) สามารถทำการดักข้อมูลที่มีค่าว่างในกล่องข้อความหรือข้อมูลแบบเลือกตอบด้วยคำสั่ง Javascript (จาวาสคริป) คือ คำสั่งที่ไว้เช็คการกรอกข้อมูลทั้งแบบกรอกเองหรือแบบเลือกตอบ เพื่อป้องกันการได้ข้อมูลที่ไม่ครบถ้วนสมบูรณ์ เช่นในกรณีที่เป็นแบบสอบถามออนไลน์ คำถามอาจมีจำนวนหลายข้อผู้กรอกแบบสอบถามอาจพลาดบางข้อไป
ถ้ากรอกข้อมูลครบถ้วนระบบอาจจะทำการบันทึกหรือทำการตามคำสั่ง แต่ถ้ากรอกข้อมูลไม่ครบระบบจะทำงานแจ้งส่วนที่มีค่าว่างหรือข้อมูลที่ไม่ได้กรอกไว้

การสร้าง site สามารถดูเพิ่มเติมได้ ที่นี่
การสร้างฟอร์มสามารถดูเพิ่มเติมได้ ที่นี่

การสร้างเพจ
File(ไฟล์) > New(นิว)
2-1.png
2-1.png (28.28 KiB) เปิดดู 163 ครั้ง

Blank Page (แบล้งเพจ) > PHP (พีเอชพี) > Create (ครีเอท)
2-2.png
2-2.png (30.55 KiB) เปิดดู 163 ครั้ง

ทำการเซฟไฟล์
File > save as (เซฟ แอด)
2-3.png
2-3.png (27.75 KiB) เปิดดู 163 ครั้ง

ในตัวอย่างสร้างไฟล์ชื่อ Home.php (โฮมดอทพีเอชพี) ที่โฟลเดอร์ชื่อ test (เทส)
2-4.png
2-4.png (22.77 KiB) เปิดดู 163 ครั้ง

การสร้างฟอร์ม
2-5.png
2-5.png (41.03 KiB) เปิดดู 163 ครั้ง

การสร้างตาราง Insert (อินเสิด) > Table (เทเบิล)
2-6.png
2-6.png (28.92 KiB) เปิดดู 163 ครั้ง

ในที่นี้จะสร้างตาราง 4แถว 2คอลัมน์ ขนาด 500 Pixel(พิกเซล)
2-9.png
2-9.png (26.22 KiB) เปิดดู 163 ครั้ง

เมื่อได้ตารางแล้วให้คลิกคลุมทั้งตารางแล้วเลือก Align (อะราย) > Center(เซ็นเตอร์)
2-8.png
2-8.png (37.67 KiB) เปิดดู 163 ครั้ง

ลากคลุมบรรทัดบนและบรรทัดล่างแล้วคลิกขวา Table > Merge Celles (เมิดเซลล์)
2-7.png
2-7.png (39.05 KiB) เปิดดู 163 ครั้ง

พิมข้อความ แล้วเลือก Align Center
2-13.png
2-13.png (52.65 KiB) เปิดดู 163 ครั้ง

การสร้างกล่องข้อความ
Insert > Form (ฟอร์ม) > Text (เทค)
2-12.png
2-12.png (39.75 KiB) เปิดดู 163 ครั้ง

เมื่อได้กล่องข้อความให้ทำการตั้งชื่อกล่องข้อความเพื่อใช้ในการรับส่งค่า
2-11.png
2-11.png (41.7 KiB) เปิดดู 163 ครั้ง

หมายเลข 1 กล่องข้อมูล
หมายเลข 2 ชื่อกล่องข้อมูล
หมายเลข 3 Size เป็นขนาดกล่องข้อความ Max Length(แมกแล๊ง) เป็นกล่องข้อความที่รับข้อมูลได้ตามจำนวนที่กรอก ในที่นี้ใส่เลข 30 เท่ากับใส่ข้อมูลได้ 30 ตัว
หมายเลข 4 เป็นข้อความที่แสดงว่าควรกรอกข้อมูลอะไรหรือข้อความตัวอย่างที่ใช้กรอก

การสร้างปุ่ม Submit (ซับมิด)
2-10.png
2-10.png (40.7 KiB) เปิดดู 163 ครั้ง

ภาพตัวอย่างการวางโค้ด
2-15.png
2-15.png (17.41 KiB) เปิดดู 163 ครั้ง

ตัวอย่างการเช็คฟอร์ม ตามหมายเลข 1

โค้ด: เลือกทั้งหมด

 <form name="form1" method="post" action="add.php" onSubmit="return CheckForm()">


ตัวอย่างการเช็คค่าว่าง ตามหมายเลข2

โค้ด: เลือกทั้งหมด

<script language="javascript">
function CheckForm(){
   if(form1.Name.value == ''){
      alert('กรุณากรอกชื่อ')
      form1.Name.focus()
      return false
      
      }else if(form1.Last.value == ''){
      
      alert('กรุณากรอกนามสกุล')
      form1.Last.focus()
      return false   
   }
}
</script>


ภาพตัวอย่างการแสดงผลในกรณีที่กรอกข้อมูลไม่ครบ
2-14.png
2-14.png (51.69 KiB) เปิดดู 163 ครั้ง

ถ้ากรอกครบระบบจะเพิ่มข้อมูล ตามโค้ด action="add.php"

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน