11 กรกฎาคม 2555

Checkbox เลือกแล้วยังคงอยู่ เมื่อเปลี่ยนหน้า

บทความนี้เป็นตัวอย่างง่าย ๆ ในการทำให้ตัว เช็คบ๊อก(Checkbox) ยังคงอยู่เมื่อเราเปลี่ยนหน้าไปหน้าอื่น ซึ่งการทำเช่นนี้ เหมาะสำหรับเมื่อมีข้อมูลเยอะ ๆ แล้วนำมาแบ่งหน้าเพื่อแสดง ในตัวอย่างก็จะทำ Session มาเป็นตัวช่วยในการเก็บค่าให้ยังคงอยู่เมื่อเปลี่ยนหน้า

ตัวอย่าง จะประกอบด้วย ३ ไฟล์ ดังนี้

ไฟล์ test-१.php

<?php
session_start();
//+ ฟังชั่นสำหรับเช็คค่า Checkbox กับ Session
function check_session($value){
if(isset($_SESSION['value'])){
if(in_array($value, $_SESSION['value'])){
return true;
}else{
return false;
}
}
}
?>
<!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 type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function set_session(ele){
if(ele.checked==true){
$.ajax({
type: 'POST',
url: "set_session.php", //+ ส่งค่าไปสร้าง Session ที่ไฟล์ set_session.php
data: {value:ele.value, con:'create'}
});
}else{
$.ajax({
type: 'POST',
url: "set_session.php", //+ ยกเลิก Session หากติ๊กเครื่องหมายถูกออก
data: {value:ele.value, con:'delete'}
});
}
}
</script>
<title>Untitled Document</title>
</head>

<body>
<?php for($i=1; $i<=20; $i++){ ?>
<input type="checkbox" name="checkbox[]" id="checkbox" value="<?php echo $i ?>" <?php if(check_session($i))echo'checked="checked"' ?> onclick="set_session(this);" />
ข้อมูลลำดับที่ : <?php echo $i ?>
<br />
<?php } ?>
<a href="test-1.php">1</a> | <a href="test-2.php">2</a>
</body>
</html>


ไฟล์ test-२.php
<?php
session_start();
//+ ฟังชั่นสำหรับเช็คค่า Checkbox กับ Session
function check_session($value){
if(isset($_SESSION['value'])){
if(in_array($value, $_SESSION['value'])){
return true;
}else{
return false;
}
}
}
?>
<!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 type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function set_session(ele){
if(ele.checked==true){
$.ajax({
type: 'POST',
url: "set_session.php", //+ ส่งค่าไปสร้าง Session ที่ไฟล์ set_session.php
data: {value:ele.value, con:'create'}
});
}else{
$.ajax({
type: 'POST',
url: "set_session.php", //+ ยกเลิก Session หากติ๊กเครื่องหมายถูกออก
data: {value:ele.value, con:'delete'}
});
}
}
</script>
<title>Untitled Document</title>
</head>

<body>
<?php for($i=21; $i<=40; $i++){ ?>
<input type="checkbox" name="checkbox[]" id="checkbox" value="<?php echo $i ?>" <?php if(check_session($i))echo'checked="checked"' ?> onclick="set_session(this);" />
ข้อมูลลำดับที่ : <?php echo $i ?>
<br />
<?php } ?>
<a href="test-1.php">1</a> | <a href="test-2.php">2</a>
</body>
</html>

ไฟล์ set_session.php

<?php
//+ ไฟล์สำหรับสร้าง Session
session_start();
if($_POST['con'] == 'create'){
if (!in_array($_POST['value'], $_SESSION['value'])) {
$_SESSION['value'][] = $_POST['value'];
}
}else{
if (in_array($_POST['value'], $_SESSION['value'])) {
$key = array_search($_POST['value'], $_SESSION['value']); //+ ใช้ฟังชั่น array_search หา index array
unset($_SESSION['value'][$key]); //+ ลบ Session ด้วย index array ที่ได้
}
}
?>

2 ความคิดเห็น:

  1. ขอบคุณมากๆ เลยครับ ผมงมมาเป็น อาทิตย์ละ มาเจอโค้ดนี้ทำให้เห็นแสงสว่างทันทีเลยครับ

    ตอบลบ