
เพื่อนผมท่านหนึ่งสร้างฟอร์มให้ยูสเซอร์ป้อนค่า ครั้งละหลายๆค่า จะได้ไม่เสียเวลา โดยเพื่อนท่านนั้นใช้เท็กบ็อกแบบอะเรย์
<form id="form1" name="form1" method="post" action=""> <p> Product : <input type="text" name="product[]" id="product[]" /> </p> <p> Product : <input type="text" name="product[]" id="product[]" /> </p> <p> <input type="submit" name="button" id="button" value="Submit" /> </p> </form>
ทีนี้เรื่องของเรื่องก็คืออยากจะเช็กให้ยูสเซอร์ต้องป้อนข้อมูลในทุกช่องเท็กบ้อก จะใช้ jQuery เช็กยังไง
เท่าที่ผมคิดได้ตอนนี้มี 2 วิธีเขียน
jQuery .each วิธีที่ 1
<script type="text/javascript">
$(document).ready(function(){
$('#form1').submit(function(){
var msg = 'โปรดตรวจสอบความถูกต้องด้วยจ่ะ \n\n';
var empty = false;
$('input[name^=product]').each(function(){
if( $(this).val() == '' ){ empty=true; }
});
if( empty ){
msg += 'มีช่องป้อนข้อมูลบางตัวว่างอยู่';
alert( msg );
return false;
}
});
})
</script>วนลูปไล่คอนโทรล input ที่มีชื่อขึ้นต้นด้วยคำว่า product ไปทีละตัว ถ้าคอนโทรลตัวปัจจุบันมีค่าว่าง หรือกล่าวได้ว่ายูสเซอร์ไม่ได้ป้อนข้อมูล เราก็เซ็ตบอกไว้ว่ามีคอนโทรลเท็กบ้อกของเราบางตัวมีค่าว่าง
$('input[name^=product]').each(function(){
if( $(this).val() == '' ){ empty=true; }
});นี่ละครับวิธีการใช้งาน .each ของ jQuery คือมันจะทำหน้าที่วนลูปไต่คอนโทรลไปทีละตัว แล้วเราสามารถเข้าถึงคอนโทรลแต่ละตัวได้ด้วยคำสั่ง $(this)
jQuery .each วิธีที่ 2
<script type="text/javascript">
$(document).ready(function(){
$('#form1').submit(function(){
var msg = 'โปรดตรวจสอบความถูกต้องด้วยจ่ะ \n\n';
var empty = false;
$.each( $('input[name^=product]') , function(){
if( $(this).val() == '' ){ empty=true; }
});
if( empty ){
msg += 'มีช่องป้อนข้อมูลบางตัวว่างอยู่';
alert( msg );
return false;
}
});
})
</script>รูปแบบการเขียนต่างกัน แต่ให้ผลลัพธ์ที่เหมือนกัน
$.each( $('input[name^=product]') , function(){
if( $(this).val() == '' ){ empty=true; }
});วิธีการใช้งานคำสั่ง jQuery .each เพิ่มเติม ดูได้ที่นี่ครับ http://api.jquery.com/each/
บทความน่าสนใจ
ผู้เขียน: วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
เว็บไซต์ :http://www.select2web.com
งานเล็กๆก็ยิ่งใหญ่ได้ ถ้าอยู่ในที่ๆเหมาะสม
มี 3 ความเห็น ในบทความเรื่อง “jQuery .each เขาใช้กันยังไง”
แสดงความเห็น
Categories
- 1 week 1 Source (2)
- AppServ (10)
- Array (2)
- Codeigniter (1)
- Computer (7)
- CSS (9)
- Dreamweaver (7)
- Firefox (7)
- Form (2)
- FPDF (15)
- General (31)
- HTML (2)
- Javascript (6)
- jQuery (86)
- Mac (10)
- MySQL (15)
- Navicat (9)
- Other (58)
- PHP (97)
- PHP-function (12)
- Program (8)
- SMF (15)
- SQL (20)
- Theme (1)
- TinyMCE (7)
- webservice (1)
- Wordpress (18)
- คอมฯ ทั่วไป (6)
-
Recent Posts
- akismet ปลักอินกรองแสปมของเวิร์ดเพรส
- WP-CMS Post Control ปลักอินสำหรับซ่อนสิ่งที่ไม่ต้องการในเวิร์ดเพรส
- wordpress flickr manager ปลักอินสำหรับอัปโหลดภาพเก็บที่ flickr
- picpick โปรแกรมที่เว็บโปรแกรมเมอร์ต้องมีไว้ติดเครื่อง
- ขอความเห็น
- todoist โปรแกรมจดรายการสิ่งที่ต้องทำสุดเจ๋ง
- wordpress google xml sitemap หนึ่งในปลักอินที่ท่านต้องติดตั้ง
- แนะนำเว็บให้ความรู้การเขียนโปรแกรมโคตะระเด็ด
- โปรแกรมจดรายการสิ่งที่จะต้องทำ
- แจกภาพปุ่มเอาไปตกแต่งเว็บ
- วิธีสร้างเว็บให้ติดอันดับหนึ่ง
- wordpress ปิงผู้ปิดทองหลังพระ
- วิธีเปิด notepad อย่างรวดเร็ว
- วิธีดึงข้อมูลออกจากฐานข้อมูลของเวิร์ดเพรส แบบสุ่ม
- หารายละเอียดโดเมน
Tags
AppServ Array Back to the basic bug calendar CAPTCHA chart CSS Dreamveawer eclipse error firebug Firefox firefox plugin FPDF General google helios HTML icons Javascript jQuery jquery plugin jquery slide jQuery tutorial jQuery UI Mac MySQL Other pdt PHP phpmailer programming slide slide show SMF smf themes smf themes download smf themes free smf themes thai SQL sql function tooltip Wordpress wordpress plugin
ขอบคุณครับ สำหรับความรู้ครับ
ใช้ jquery ตรวจช่องว่าง อาจโดนบอมได้นะครับ โดยการปิด java script
เวลาใช้งานจริงๆ การป้องกันแค่ด้วยจาวาสคริปต์คงไม่พอ
เราอาจจะต้องใช้ captcha ประกอบด้วย และอาจจะต้องใช้ server side script เข้ามาร่วมด้วย