
เพื่อนผมท่านหนึ่งสร้างฟอร์มให้ยูสเซอร์ป้อนค่า ครั้งละหลายๆค่า จะได้ไม่เสียเวลา โดยเพื่อนท่านนั้นใช้เท็กบ็อกแบบอะเรย์
<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/
บทความน่าสนใจ
มี 3 ความเห็น ในบทความเรื่อง “jQuery .each เขาใช้กันยังไง”
แสดงความเห็น
Categories
-
Recent Posts
- เครื่องฟ้อง error จอฟ้า STOP: c0000221 {Bad Image Checksum}
- The application failed to initialize properly(000000)
- อยากเปิดร้านคอม ทำยังไงดี?
- Wordpress Theme PhotoMadness ธีมสำหรับคนชอบถ่ายภาพ
- mail server : ติดตั้ง argosoft mail server
- mail server สร้างเมล์เซิฟเวอร์ทดสอบโค้ดส่งอีเมล์ ด้วย hmailserver
- php redirect สั่งเด้งฟ้าผ่า
- javascript ห้ามคลิกขวา
- CSS IE Bugs แมลงร้ายในไออี 6
- PHP round ปัดเศษ
- PHP ceil() ปัดเศษขึ้น
- Gravatar สร้างร่างใหม่สู่โลกออนไลน์
- PHP floor() ปัดเศษลง
- แจกโค้ด php คำนวณอายุ
- PHP date() ฟังก์ชั่นจัดการวัน-เวลา
Tags
Array Back to the basic calendar CAPTCHA chart CSS Dreamveawer error firefox firefox plugin FPDF General gmail google hotmail html icon icons javascript jQuery jquery plugin jquery slide jquery tooltip jQuery tutorial jQuery UI loop Mac MySQL Other PHP plugin program 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 เข้ามาร่วมด้วย