เพื่อนผมท่านหนึ่งสร้างฟอร์มให้ยูสเซอร์ป้อนค่า ครั้งละหลายๆค่า จะได้ไม่เสียเวลา โดยเพื่อนท่านนั้นใช้เท็กบ็อกแบบอะเรย์

<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

Live Demo

<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

Live Demo

<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/

api jQuery Live Demo loop
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ