เรื่อง สวิตว์ On/Off ค่ะ รบกวนหน่อยนยะค่ะ :(

พอดีว่า จะทำปุ่มสวิต On/Off แบบนี้ค่ะ http://www.bootstrap-switch.org/examples.html
แต่มันติดปัญหาอยู่ตรงที่ว่า จะต้องทำยังไงให้มันอัพเดทค่ะ แล้วเป็นแบบ วนลูปด้วยค่ะ ไม่รู้ว่าต้องทำยังไงจริงๆค่ะ

<?php include("Connections/connect.php"); ?>
<?
	$sql = "select * from vessels";
	$result = mysql_query($sql);
	function date_short_number($date){  
   if(empty($date) || ($date=='00-00-0000')){
      return '';
   } else {
    $time=strtotime($date);
    $thai_date_return.=date("d",$time);     
    $thai_date_return.="/".date("m",$time);     
    $thai_date_return.= "/".substr((date("Y",$time)+543),-4);     
    return $thai_date_return; 
   }    
}
if(isset($_GET['delete_id']))
{
 $sql_query="DELETE FROM vessels WHERE vessel_id=".$_GET['delete_id'];
 mysql_query($sql_query);
 echo ("<script>window.location='management.php'</script>");		
 
}



?>

<link href="bootstrap/css/bootstrap-switch.css" rel="stylesheet">
<link href="dist/css/sweetalert.css" rel="stylesheet" />

<form action="#" method="post">
<div class="col-lg-12">
	<h3><p align="center">Vessel</p></h3> 
	<p align="right" style="font-weight:bold;"><a href="add_vessel.php"><span class="fa fa-plus"></span>&nbsp;&nbsp;Add Vessel</a></p>
	<div class="table-responsive">
    	<table class="table table-striped table-hover">
        	<tr align="center">
               <td>Photo</td>
               <td>Vessel Name</td>
               <td>Vessel Type</td>
			   <td>Year Built</td>
			   <td>LOA</td>
			   <td>Draft</td>
			   <td>Owner</td>
               <td>GRT</td>
               <td>DWT</td>
               <td>M/E BHP</td>
               <td>IMO NO.</td>
               <td>การจัดการ</td>
               <td>On/Off</td>
            </tr>
            <?
				while($row=mysql_fetch_array($result) ){
			?>
            <tr align="center">
               <td><a href="edit_vessel.php?vessel_id=<?=$row['vessel_id'] ?>"><img src="vessel/<?=$row['vessel_image']; ?>" width="50" height="60" class="img-responsive img-thumbnail"/></a></td>
               <td><a href="edit_vessel.php?vessel_id=<?=$row['vessel_id'] ?>"><?=$row['vessel_name']; ?></a></td>
               <td><a href="edit_vessel.php?vessel_id=<?=$row['vessel_id'] ?>"><?=$row['vessel_type']; ?></a></td>
			   <td><a href="edit_vessel.php?vessel_id=<?=$row['vessel_id'] ?>"><?=$row['vessel_built']; ?></a></td>
			   <td><a href="edit_vessel.php?vessel_id=<?=$row['vessel_id'] ?>"><?=$row['vessel_loa']; ?></a></td>
			   <td><a href="edit_vessel.php?vessel_id=<?=$row['vessel_id'] ?>"><?=$row['vessel_draft']; ?></a></td>
			   <td><a href="edit_vessel.php?vessel_id=<?=$row['vessel_id'] ?>"><?=$row['vessel_owner']; ?></a></td>
               <td><a href="edit_vessel.php?vessel_id=<?=$row['vessel_id'] ?>"><?=$row['vessel_grt']; ?></a></td>
               <td><a href="edit_vessel.php?vessel_id=<?=$row['vessel_id'] ?>"><?=$row['vessel_nrt']; ?></a></td>
               <td><a href="edit_vessel.php?vessel_id=<?=$row['vessel_id'] ?>"><?=$row['vessel_bhp']; ?></a></td>
               <td><a href="edit_vessel.php?vessel_id=<?=$row['vessel_id'] ?>"><?=$row['vessel_imo']; ?></a></td>
               <td align="center">
               	<i class="fa fa-pencil-square-o"></i><a href="edit_vessel.php?vessel_id=<?=$row['vessel_id'] ?>"> Edit</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <i class="glyphicon glyphicon-trash"></i><a href="javascript:delete_id(<?php echo $row['vessel_id']; ?>)">&nbsp;Delete</a>
               </td>
               <td align="center"><input type="checkbox" checked></td>
  		   </tr>
           <script type="text/javascript">
					function delete_id(id)
						{
							swal({   
							title: "คุณต้องการลบ เรือ <?=$row['vessel_name']; ?> ?",   
							text: "......",   
							type: "warning",   
							showCancelButton: true,   
							confirmButtonColor: "#DD6B55",   
							confirmButtonText: "Delete !",  
							closeOnConfirm: false,
						}, 
		
					function(){   
						swal("Deleted!", "....", "success")
							setTimeout(function(){     
								window.location.href='management.php?delete_id=' id;   
								}, 1500);
		
						});
					}
		

				</script>
           	<? 
				}
			?>  
        </table>
    </div>
</div>
</form>
<script src="dist/js/sweetalert.min.js"></script>
<script src="bootstrap/js/jquery.min.js"></script>
<script src="dist/js/bootstrap-switch.js"></script>    
    <script>
    $(function(argument) {
      $('[type="checkbox"]').bootstrapSwitch();
    })
</script>

ช่วยทีนะค่ะ หามาหลายเว็บแล้ว ไม่รู้จะใช้คีย์เวิดอะไรแล้วค่ะ ขอบคุณมากนะค่ะ

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

updateStatus.php

<?php
header("Content-type:text/html; charset=UTF-8");          
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>

ไฟล์ทดสอบ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
    <link rel="stylesheet" href="bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>   
    <script src="bootstrap-switch-master/dist/js/bootstrap-switch.min.js"></script>
</head>
<body>

<div class="container">
<br>
<br>
<br>
<?php for($i=1;$i<=5;$i++){?>
<?php echo $i; ?> <input type="checkbox" name="my-checkbox" value="<?=$i?>" >
<br>    <br>    
<?php } ?>

</div>      
<div id="place_show">
    
</div>             
    


<script type="text/javascript">
$(function(){
    $.fn.bootstrapSwitch.defaults.size = 'small';
    $.fn.bootstrapSwitch.defaults.onColor = 'success';    
    $("[name='my-checkbox']").bootstrapSwitch()
    .on('switchChange.bootstrapSwitch', function(event, state) {
            console.log(this); // DOM element
            console.log(event); // jQuery event
            console.log(state); // true | false
            $.post("updateStatus.php",{
                value_status:(state==true)?1:0,
                id_data:$(this).val()
            },function(data){
                $("#place_show").html(data);
            });
    });
});    
</script>
</body>
</html>

ตัวอย่าง

ขอบคุณมากเลยนะค่ะ อย่างนี้เราก็เขียน sql ใต้ echo ใช่ไหมค่ะ  ให้ update ปกติเลยใช่ไหมค่ะ 

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

<?php for($i=1;$i<=1;$i++){?> 	
               		<input type="checkbox" name="my-checkbox" value="<?=$i?>" <?php echo $row['vessel_status'] == true ? 'checked="checked"' : ''?>>
                    <?php } ?>

คือ หนูวนลูปแบบ table อยู่แล้ว พวก for จึงไม่จำเป็นต้องใช้ใช่ไหมค่ะ หนูเข้าใจถูกไหมค่ะ ? แล้ว value นี่ไม่ต้องใส่ค่าให้มันใช่ไหมค่ะ ถ้าเกิดวนเป็น table ค่ะ แล้วส่วนตรงนี้ คือ ส่วนไฟล์ Update ที่พี่ให้สร้างขึ้นมา เพื่อ ดึงแบบ ajax หนูไม่มีความรู้ทางด้าน ajax เท่าไหร่เลยค่ะ ขอคำแนะนำด้วยนะค่ะ

ทำไม่เป็นจริงๆค่ะ 

<?php  
header("Content-type:text/html; charset=UTF-8");            
header("Cache-Control: no-store, no-cache, must-revalidate");           
header("Cache-Control: post-check=0, pre-check=0", false);   
echo "<pre>";  
print_r($_POST);  
echo "</pre>";  



include("../Connections/connect.php"); 
$vessel_id=$_GET["vessel_id"];
$sql_update = "update vessels set vessel_status = '".$_POST["my-checkbox"]."' where vessel_id = '".$vessel_id."'";
mysql_query($sql_update);

?>  

 

ขอบคุณมากเลยนะค่ะ ได้แล้วค่ะ พี่เก่งจังเลย ^^

พี่ค่ะ หนูมีเรื่องจะถามค่ะ คือถ้าเรา off ไปแล้วจะไม่สามารถกลับมา on ได้หรอค่ะ 

ขอบคุณนะค่ะ ได้แล้วค่ะ ^^ แฮร่ๆ