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

document.form1.textbox_name.value

ย๊าวยาว…

คำสั่ง val() นี้คำสั่งเดียว สามารถใช้ได้ทั้ง ดึงค่าและกำหนดค่า เรามาดูรายละเอียดกันครับ ว่าใช้งานอย่างไร

val()

parameter : none

คำสั่งนี้ใช้สำหรับดึงค่า value ออกมาจากคอนโทรลในฟอร์ม จำพวก textbox , checkbox , listbox เป็นต้น

ตัวอย่างการใช้งาน

Live Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>jquery val command</title>
<script type="text/javascript">
$(document).ready(function(){
	// เมื่อเกิดเหตุการ submit form
	$('#form1').submit(function(){
 
		var msg = 'โปรดตรวจสอบความถูกต้องต่อไปนี้ \n\n';
 
		// ตรวจสอบว่า user ป้อน Username หรือเปล่า
		if( $('#username').val() == '' ){
			msg += 'ป้อน Username ด้วยจ่ะ';
			alert( msg );
			return false;
		}
 
		// ตรวจสอบว่า user ป้อน Password หรือเปล่า
		if( $('#password').val() == '' ){
			msg += 'ป้อน Password ด้วยจ่ะ';
			alert( msg );
			return false;
		}
 
	});
 
})
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <p>Username :
    <input type="text" name="username" id="username" />
  </p>
  <p>Password :
    <input type="password" name="password" id="password" />
  </p>
  <p>
    <input type="submit" name="login" id="login" value="Login" />
  </p>
</form>
</body>
</html>
$('#password').val()

สั้นมากๆ

val(value)

value : (string) ค่าที่ต้องการกำหนดให้กับ control

คำสั่งนี้ใช้สำหรับกำหนดค่า value ให้กับคอนโทรลในฟอร์ม

ตัวอย่างการใช้งาน

Live Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>jquery set val command</title>
<script type="text/javascript">
$(document).ready(function(){
	// เมื่อ user คลิกที่ปุ่ม set value
	$('#set').click(function(){
 
		$('#username').val('select2web.com');
		$('#password').val('10');
 
	});
 
})
</script>
</head>
<body>
<p>Username :
  <input type="text" name="username" id="username" />
</p>
<p>Password :
  <input type="password" name="password" id="password" />
</p>
<p>
  <input type="submit" name="set" id="set" value="set value" />
</p>
</body>
</html>

พอคลิกที่ปุ่มปุ๊บ โค้ดก็จะกำหนดคำว่า select2web.com ลงไปในช่องป้อนข้อมูลช่องแรก และ 10 ลงไปในช่องที่ 2

ทีนี้ลองดูตัวอย่างอีกสักตัวอย่าง แล้วสังเกตนะครับ ว่าเกิดอะไรขึ้น

Live Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>jquery checkbox value command</title>
<script type="text/javascript">
$(document).ready(function(){
	// เมื่อ user คลิกที่ปุ่ม set value
	$('#ok').click(function(){
 
		alert( $('#confirm').val() );
 
	});
 
})
</script>
</head>
<body>
<p>
  <input type="checkbox" name="confirm" id="confirm" value="1" />
  ยืนยันการลบข้อมูล
</p>
<p>
  <input type="submit" name="ok" id="ok" value="OK" />
</p>
</body>
</html>

้ถ้าท่านลองเล่นเดโม่ตัวนี้ดูท่านจะเิกิดความสงสัย และด่าผมในใจ ไม่ว่าติ๊กหรือไม่ติ๊กมันก็ออกค่ามาเป็น 1 เหมือนกัน แล้วจะให้เล่นดูทำไม๊ (วรนุช) ค่าที่ได้มันก็เหมือนกันนั่นแหละครับ ผมกำลังจะสื่อว่า คำสั่งนี้มันจะสนใจเฉพาะสิ่งที่อยู่ใน value เท่านั้น ไม่ว่าท่านจะทำอะไรหรือไม่ทำอะไรกับคอนโทรลก็ตาม

ทีนี้ถ้าท่านต้องการจะตรวจสอบว่า user ได้ติ๊กถูก checkbox หรือเปล่า ท่านจะต้องใช้คำสั่ง attr() มาช่วย

ตัวอย่างการใช้งาน

Live Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>jquery set checked checkbox command</title>
<script type="text/javascript">
$(document).ready(function(){
	// เมื่อ user คลิกที่ปุ่ม OK
	$('#ok').click(function(){
 
		alert( $('#confirm').attr('checked') );
 
	});
 
})
</script>
</head>
<body>
<p>
  <input type="checkbox" name="confirm" id="confirm" value="1" />
  ยืนยันการลบข้อมูล
</p>
<p>
  <input type="submit" name="ok" id="ok" value="OK" />
</p>
<p>ลองติ๊กถูกแล้วกดปุ่ม OK เสร็จแล้ว ติ๊กเครื่องหมายถูกออก แล้วกดปุ่ม OK อีกครั้ง</p>
</body>
</html>

ทำไมจึงเป็นเยี่ยงนี้ ก็เพราะว่า checkbox นั้นเก็บค่าการ ติ๊กหรือไม่ติ๊ก ไว้ใน property checked นั่นเอง เพราะงั้นถ้าจะตรวจสอบว่า เขาติ๊กหรือไม่ติ๊ก ให้ตรวจสอบจาก checked นะคราาาบบบบ

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

ปัจฉิมลิขิต : ผมเขียนเกี่ยวกับเรื่องจัดการ checkbox ด้วย jquery ไว้หลายบทความ ลองอ่านดู สร้างความเข้าใจเพิ่มเติม

checkbox jQuery jQuery tutorial Live Demo OK
Avatar

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

Programmer, Blogger

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